I am trying to make a search bar type of thing , by seeing youtube video : https://youtu.be/TlP5WIxVirU?t=471
but got stuck don't know why
the stack overflow is executing and getting the desired output but my pc doesnot
what could be the reason ??
I want to get the output as : Output
but while I execute this code, I'm getting the error as :
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')
at script.js:7:39
please help me
const userCardTemplate = document.querySelector("[data-user-template]")
fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(data => {
const card = userCardTemplate.content.cloneNode(true).children[0]
console.log(card)
})
.search-wrapper{
display: flex;
flex-direction: column;
}
input {
font-size: 1rem;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
gap: .25 re,;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5 rem;
}
.card .header{
margin-bottom: .25 rem;
}
.card .body {
font-size: .8rem;
}
.hide{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Engine</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="search-wrapper">
<label for="search">Search Users</label>
<input type="search" id ="search">
</div>
<div class="user-cards" >
</div>
<template data-user-template>
<div class="card">
<div class="header">
</div>
<div class="body">
</div>
</div>
</template>
</body>
</html>
The error says exactly what you needed to read. userCardTemplate was not found in the DOM. The reason being the moment in which you trigger the <script> execution. And that's in head. At the moment the parser stopped to read the current DOM there was no such element.
Instead you have two solutions:
Use the defer attribute:
<script src="script.js" defer></script>
in order to defer your script execution, or
place the SCRIPT right before the closing BODY tag:
<script src="script.js"></script>
</body>
Related
I'm trying to create a text(S) inside a rectangular box and the other one(Fox.) outside the box,
Just like this:
I tried to create it but something is wrong
Here's the code:
div {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<div><h1>S</h1></div><p><h1>Fox.</h1>
</body>
</html>
Fixed it for you.
The problem was that you used 2 h1 next to each other.
Each h1 will automatically go to a new line.
I fixed it by using only one h1 and added a <block> where you can add the styles.
block {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<h1>
<block>S</block> Fox.
</h1>
</body>
</html>
the basic idea is not bad! Now I will show you a solution to your problem and we will analyze all the components together.
Let's think about the structure of DIV. First you will need two divs with a reference class or reference ID and you want them to be arranged side by side.
To put them side by side you could create an additional parent div, of flexible type (called father).
We also need 2 texts. In this example I will use simple spans.
We also create a style.css file where we will store the style of our containers
So we can write this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the style instead, we need to assign the parent a flexible orientation and line type. For the style, on the other hand, we need to assign a flexible, row-type orientation to the parent. To the first div should be put the border and to the second div, the text inside should be bold
Create style.css and try all togheter. Run this!!!
#sonTwo,#sonOne {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sonTwo,#sonOne span {
font-size: 50px;
}
#father {
display: flex;
flex-direction: row;
}
#sonOne {
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
#sonTwo {
padding: 5px;
}
.fox {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the S on the other hand, you could assign a font from Google Fonts that we have the borders the way you like them
I am working on building a basic to-do list.
I have a list of elements with delete option for each element next to it.
I am facing issues with having proper spacing between the list elements namely "to-do text" and "Delete" icon.
Note: I'm new to Web programming.
You could set a fixed width on the container element and then use flex box:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
background-color: grey;
border: 1px solid darkGrey;
width: 300px;
padding: 10px 15px;
}
.title {
flex: 1;
padding-right: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">sample text</div>
<div>delete icon</div>
</div>
<div class="container">
<div class="title">long sample text for illustration purposes.</div>
<div>delete icon</div>
</div>
</body>
</html>
I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs
"Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) # Help.js:
Code:
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>A Random Website</title>
</head>
<body>
<script src="style.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
It is because you're using $ before jQuery has loaded.
// Instead of:
//...
<script src="style.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
// ...
And move those script tags to the line before the closing </body> tag. i.e:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
</body>
</html>
Add scripts in your head tag and first load jquery and then your custom style.js file.
Also, add the defer attribute to your script.
Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer
$(document).ready(function() {
$(".navBar").hover(function() {
$(this).css("border", "2px solid black")
})
})
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A Random Website</title>
<script src="https://code.jquery.com/jquery-latest.js" defer></script>
<script src="style.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
I'm trying to make an infinite image slider with limited items. The logic is that - after scrolling when one item has been scrolled past through and is no longer visible on screen, it will be added at the end of list. This way the nodelist will never end. However this only works for first element and instead of remaining in it's place and having a copy at end (making a total of (6+1) items, the first item is removed and placed at the end. Also if you know a better way to do this, please let me know. Application
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="project-container">
<div class="project">1</div>
<div class="project">2</div>
<div class="project">3</div>
<div class="project">4</div>
<div class="project">5</div>
<div class="project">6</div>
</div>
</body>
</html>
JavaScript:
var container = document.querySelector(".project-container")
console.log(container.childNodes[0])
var scrolled = 0;
container.addEventListener("scroll", e => {
console.log(scrolled)
if (container.scrollLeft - scrolled >= 395) {
scrolled += 395;
nodeItem = container.childNodes[0];
container.appendChild(nodeItem);
}
})
CSS:
*, *::before, *::after{
margin:0px;
padding:0px;
box-sizing: border-box;
font-size:100px;
}
.project-container{
/* display: flex; */
width:1500px;
height:400px;
background-color: rgb(15, 207, 224);
margin:auto;
margin-top:60px;
white-space: nowrap;
overflow: auto;
}
.project{
margin:40px;
display: inline-block;
height:300px;
width:350px;
background-color:white;
}
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.