this is my first attempt at using javascript HTML DOM. Im trying to put the content of the birds (the name and an image) in seperate cards but it instead it puts them all in the same card. I'm guessing my problem lies in the divs part of my javascript but I dont understand how to fix this. Can someone help me?
const cardsContainer = document.querySelector("#cards")
const birdNames = ["Koolmees", "Specht", "kerkuil"]
const birdImages = ["https://www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg?itok=arfFjeTb&c=312068de040ea85bb4eb43164e28b3b2", "https://www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg", "https://www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg"]
const birds = [
{ name: "Koolmees", image: "https://www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg?itok=arfFjeTb&c=312068de040ea85bb4eb43164e28b3b2" },
{ name: "specht", image: "https://www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg" },
{ name: "kerkuil", image: "https://www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg" }
]
function addCard(birdImage, birdName){
const cardDiv = document.createElement("div")
cardDiv.classList.add("card")
cardsContainer.appendChild(cardDiv)
const img = document.createElement("img")
img.src = birdImage
cardDiv.appendChild(img)
const nameDiv = document.createElement("div")
nameDiv.innerText = birdName
cardDiv.appendChild(nameDiv)
}
function addCards(){
for(let i = 0; i<birdNames.length; i++){
addCard(birdImages[i], birdNames[i])
}
}
addCards()
flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
flex-item {
background: #ABEBC6;
padding: 5px;
width: 250px;
height: 200px;
margin-top: 10px;
line-height: 50px;
color: black;
font-weight: bold;
font-size: 3em;
text-align: center;
}
nav {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
background: #A2D9CE;
}
nav a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
nav a:hover {
background: #1565C0;
}
wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
wrapper > * {
padding: 10px;
flex: 1 100%;
}
header {
background: #DAF7A6;
}
footer {
background: #28B463;
}
main {
text-align: left;
background: #A2D9CE;
}
aside {
background: #28B463;
}
#media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
#media all and (min-width: 800px) {
main { flex: 3 0px; }
aside { order: 1; }
main { order: 2; }
footer { order: 3; }
}
body {
width: 100%;
}
#media all and (max-width: 800px) {
nav {
justify-content: space-around;
}
}
#media all and (max-width: 600px) {
nav {
flex-flow: column wrap;
padding: 0;
}
nav a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255,0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav li:last-of-type a {
border-bottom: none;
}
}
p1 {
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p2 {
font-family: Arial, Helvetica, sans-serif;
}
p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
img {
width: 250px;
height: 150px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Test week 2</title>
</head>
<body>
<wrapper>
<header><p1>Vogel magazine voor vogelspotters!</p1></header>
<main>
<flex-container>
<flex-item id="cards"></flex-item>
</flex-container>
</main>
<aside>Aside 1</aside>
<footer>Footer</footer>
</wrapper>
<script src="js/DOM2.js"></script>
</body>
</html>
In your function addCard(birdImage, birdName) change const cardDiv = document.createElement("div") by const cardDiv = document.createElement("flex-item"), remove the flex-item tag and pass the id="cards to <flex-container id="cards">
const cardsContainer = document.querySelector("#cards")
const birdNames = ["Koolmees", "Specht", "kerkuil"]
const birdImages = ["https://www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg?itok=arfFjeTb&c=312068de040ea85bb4eb43164e28b3b2", "https://www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg", "https://www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg"]
const birds = [
{ name: "Koolmees", image: "https://www.natuurpunt.be/sites/default/files/styles/content-wide/public/koolmees_fr_van_bauwel.jpg?itok=arfFjeTb&c=312068de040ea85bb4eb43164e28b3b2" },
{ name: "specht", image: "https://www.buitenleven.nl/wp-content/uploads/2019/10/grote-bonte-specht.jpg" },
{ name: "kerkuil", image: "https://www.vogelhuisjes.nl/media/wysiwyg/vogels-in-de-tuin/vogels-in-nederland/xkerkuil.jpg.pagespeed.ic.8a2v4rM0Z3.jpg" }
]
function addCard(birdImage, birdName){
const cardDiv = document.createElement("flex-item")
cardDiv.classList.add("card")
cardsContainer.appendChild(cardDiv)
const img = document.createElement("img")
img.src = birdImage
cardDiv.appendChild(img)
const nameDiv = document.createElement("div")
nameDiv.innerText = birdName
cardDiv.appendChild(nameDiv)
}
function addCards(){
for(let i = 0; i<birdNames.length; i++){
addCard(birdImages[i], birdNames[i])
}
}
addCards()
flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
padding: 0;
margin: 0;
list-style: none;
}
flex-item {
background: #ABEBC6;
padding: 5px;
width: 250px;
height: 200px;
margin-top: 10px;
line-height: 50px;
color: black;
font-weight: bold;
font-size: 3em;
text-align: center;
}
nav {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
background: #A2D9CE;
}
nav a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}
nav a:hover {
background: #1565C0;
}
wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
wrapper > * {
padding: 10px;
flex: 1 100%;
}
header {
background: #DAF7A6;
}
footer {
background: #28B463;
}
main {
text-align: left;
background: #A2D9CE;
}
aside {
background: #28B463;
}
#media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
#media all and (min-width: 800px) {
main { flex: 3 0px; }
aside { order: 1; }
main { order: 2; }
footer { order: 3; }
}
body {
width: 100%;
}
#media all and (max-width: 800px) {
nav {
justify-content: space-around;
}
}
#media all and (max-width: 600px) {
nav {
flex-flow: column wrap;
padding: 0;
}
nav a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255, 255, 255,0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav li:last-of-type a {
border-bottom: none;
}
}
p1 {
font-family: "Times New Roman", Times, serif;
font-size: 40px;
}
p2 {
font-family: Arial, Helvetica, sans-serif;
}
p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
img {
width: 250px;
height: 150px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Test week 2</title>
</head>
<body>
<wrapper>
<header><p1>Vogel magazine voor vogelspotters!</p1></header>
<main>
<flex-container id="cards">
</flex-container>
</main>
<aside>Aside 1</aside>
<footer>Footer</footer>
</wrapper>
<script src="js/DOM2.js"></script>
</body>
</html>
Related
I am trying to make an Etch-a-Sketch copy (when I hover the single pixel with the mouse it changes its color) and I've got stuck at drawing the board, The flexbox container doesn't respect the width and height set in the JavaScript file, and it creates div with 0 widths and stretched height. What am I doing wrong?
const okBtn = document.querySelector('#ok-button')
okBtn.addEventListener('click', () => {
const size = document.querySelector("#grid-size").value
drawGrid(size)
})
const BOX = document.querySelector("#drawing-space")
const BOXsize = BOX.offsetWidth
function drawGrid(size) {
var cellSize = BOXsize / size
console.log()
for (let i = 0; i < size * size; i++) {
const cell = document.createElement('div')
cell.classList.add('cell')
BOX.appendChild(cell)
cell.width = cellSize
cell.height = cellSize
console.log("appended #", i)
console.log(cell.offsetWidth)
console.log(cell.offsetHeight)
}
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
height: 100vh;
}
/* HEADER */
#header {
display: flex;
font-size: 90px;
justify-content: center;
align-items: center;
background-color: #1A1A1D
}
#header .tittle {
color: aliceblue;
font-family: 'Shadows Into Light', cursive;
}
img {
font-size: 40px;
font-style: italic;
}
/* MAIN */
.main {
background-color: rgb(192, 213, 231);
font-size: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.main #reset-button {
font-family: 'Shadows Into Light', cursive;
}
#size-settings {
display: flex;
font-size: 50px;
font-family: 'Shadows Into Light', cursive;
}
#size-settings #size-input input {
margin: 5px;
margin-right: 10px;
background-color: rgb(192, 213, 231);
width: 60px;
height: 60px;
font-size: 45px;
font-family: 'Shadows Into Light', cursive;
}
#reset-button:hover {
transform: scale(1.3);
color: aliceblue;
}
#ok-button:hover {
transform: scale(1.3);
color: aliceblue;
}
#drawing-space {
width: 900px;
height: 900px;
border: #1A1A1D 4px solid;
}
#drawing-space {
display: flex;
flex-flow: row wrap;
}
/* CELL */
.cell {
border: #C3073F solid 1px;
flex: 0 0 auto;
}
/* FOOTER */
#footer {
display: flex;
align-items: center;
justify-content: center;
background-color: #C3073F;
margin: 0px;
}
#footer .text {
font-size: 40px;
}
/* ICONS */
.material-symbols-outlined {
font-size: 100px;
color: aliceblue;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}
<!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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<div class="tittle">SKETCHBOOK</div>
<div id="pen-icon">
<div class="material-symbols-outlined">edit</div>
</div>
</div>
<div class="main">
<div id="reset-button">RESET</div>
<div id="size-settings">
<div class="text">SIZE:</div>
<div id="size-input"><input id="grid-size" type="number" for="text" min="1" max="99"></div>
<div id="ok-button">OK</div>
</div>
<div id="drawing-space">
</div>
</div>
<div id="footer">
<div class="text"> by mt 2022</div>
</div>
<script src="script.js"></script>
</body>
</html>
CodePen: https://codepen.io/mttt7/pen/RwyavzB
The problem is that you are trying to set the width and height wrongly.
You have two issues, first, you have to call the style object when you want to set inline styles, second, you are not adding any unit for both.
To make it work you can change it to
cell.style.width = `${cellSize}px`;
cell.style.height = `${cellSize}px`;
const okBtn = document.querySelector('#ok-button')
okBtn.addEventListener('click', () => {
const size = document.querySelector("#grid-size").value
drawGrid(+size)
})
const BOX = document.querySelector("#drawing-space")
const BOXsize = BOX.offsetWidth
function drawGrid(size) {
var cellSize = BOXsize / size;
for (let i = 0; i < size * size; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
BOX.appendChild(cell);
cell.style.width = `${cellSize}px`;
cell.style.height = `${cellSize}px`;
// console.log("appended #", i)
//console.log(cell.offsetWidth)
//console.log(cell.offsetHeight)
}
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
height: 100vh;
}
/* HEADER */
#header {
display: flex;
font-size: 90px;
justify-content: center;
align-items: center;
background-color: #1A1A1D
}
#header .tittle {
color: aliceblue;
font-family: 'Shadows Into Light', cursive;
}
img {
font-size: 40px;
font-style: italic;
}
/* MAIN */
.main {
background-color: rgb(192, 213, 231);
font-size: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.main #reset-button {
font-family: 'Shadows Into Light', cursive;
}
#size-settings {
display: flex;
font-size: 50px;
font-family: 'Shadows Into Light', cursive;
}
#size-settings #size-input input {
margin: 5px;
margin-right: 10px;
background-color: rgb(192, 213, 231);
width: 60px;
height: 60px;
font-size: 45px;
font-family: 'Shadows Into Light', cursive;
}
#reset-button:hover {
transform: scale(1.3);
color: aliceblue;
}
#ok-button:hover {
transform: scale(1.3);
color: aliceblue;
}
#drawing-space {
width: 900px;
height: 900px;
border: #1A1A1D 4px solid;
}
#drawing-space {
display: flex;
flex-flow: row wrap;
}
/* CELL */
.cell {
border: #C3073F solid 1px;
flex: 0 0 auto;
}
/* FOOTER */
#footer {
display: flex;
align-items: center;
justify-content: center;
background-color: #C3073F;
margin: 0px;
}
#footer .text {
font-size: 40px;
}
/* ICONS */
.material-symbols-outlined {
font-size: 100px;
color: aliceblue;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}
<!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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<div class="tittle">SKETCHBOOK</div>
<div id="pen-icon">
<div class="material-symbols-outlined">edit</div>
</div>
</div>
<div class="main">
<div id="reset-button">RESET</div>
<div id="size-settings">
<div class="text">SIZE:</div>
<div id="size-input"><input id="grid-size" type="number" for="text" min="1" max="99"></div>
<div id="ok-button">OK</div>
</div>
<div id="drawing-space">
</div>
</div>
<div id="footer">
<div class="text"> by mt 2022</div>
</div>
<script src="script.js"></script>
</body>
</html>
According to what your application wants achieve and the answer on the part that you should update this
cell.style.width = `${cellSize}px`;
cell.style.height = `${cellSize}px`;
Also, you should change this
const BOXsize = BOX.offsetWidth
function drawGrid(size) {
var cellSize = BOXsize / size;
...
}
}
to
const BOXsize = BOX.clientWidth;
function drawGrid(size) {
var cellSize = (BOXsize - 2 * size)/ size;
...
}
The reasons are the differences of offsetWidth and clientWidth and the size of div element's border you set.
The formula would be cellSize = (BOXsize - (border size of div) * 2 * size)/ size
I'm trying to create a responsive navbar.
When screen size is reduced I'm using media query to style visibility of #nav-items to hidden and display a menu icon.
I have written a javascript code to handle on click on menu icon style #nav-itmes to visible and hidden (trying to toggle by if condition to check style value)
Problem: on first click result is ok. #nav-items are visible but again when i click #nav-items style does not change to hidden (while i can console click event is there on every click)
Can anyone guide me ?
There are several approach to have this result to toggle an element but I want to only know what is issue in below code. (only javascript please).
let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
console.log('clicked');
let nav_items = document.getElementById("nav-items");
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
display: none;
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon">
Often you cannot see the style of an element in JS if the style was applied in a stylesheet
You can toggle a class instead
For example
nav { visibility: hidden; }
nav.show { visibility: visible; }
and js
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav { visibility: hidden; }
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
nav.show {
visibility: visible;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon" title="ICON" alt="ICON">
Think this line is incorrect:
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
The equality check should be:
nav_items.style.visibility === "hidden"
so this may work:
nav_items.style.visibility = (nav_items.style.visibility === "hidden" ? "visible" : "hidden");
Try the css property for media-query: display:none !important;
I am trying to figure out a way for me to add some jpgs to my cats gallery. My layout includes images from one of three categories. I am using vite-react scaffold. I thought I could find a way to create one folder for each category, add all the jpgs in that folder, and then drum up some JSX to handle rendering. This is what I have so far. PS - the console is logging nothing - no errors or my attempt to confirm all the values were logging
// import { useState } from 'react'
import * as allFloofs from './assets/floofs/floofs'
function App() {
// const [images, setImages] = useState(false)
for (var i = 0; i < allFloofs.length; i++) {
let src = `${allFloofs[i]}`;
console.log(allFloofs[i])
let floof = new Image();
floof.src = src;
querySelector.image - container.appendChild(floof);
}
return (
<div className = "App" >
<div className = "image-container" >
<div> {
/* <Floofs/>
<Sleps/>
<Snyks/> */
}
</div>
</div>
</div >
)
}
export default App
.App {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
text-align: center;
}
.image-container {
width: 80%;
margin-left: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.image-container div:first-child {
grid-column-start: 1;
grid-column-end: 3;
}
.image-container div:last-child {
grid-row-start: 2;
grid-row-end: 5;
}
.image {
width: 100%;
height: 30px;
}
.image img {
width: 40%;
height: 40%;
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
#media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/src/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> 🐈 F.I.R 🐈 </title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
dir layout
I created an array with four objects. I am attempting to show a new random object in the array each time a button (HAPPY) is clicked, using a FOR loop. However, on button click, the loop only runs once with no error messages given. I have looked through other peoples' for loops and they are similar or identical to mine. So I am not sure where I have gone wrong.
I know that a small part of code is missing to bring everything together. I suspected it was something to do with [i] and have tried adding this to different parts of the code - to no avail.
Any help appreciated, thank you. JS Fiddle HERE
window.onload = () => {
/* HTML ELEMENTS */
var arrow = document.getElementById("arrow");
var welcomeButton = document.getElementById("welcome-button");
var welcomeBox = document.getElementById("welcome-box");
var introQuestion = document.getElementById("intro-question");
var happyButton = document.getElementById("happy");
const nextVerseButton = document.querySelector(".box-button");
const slider = document.querySelector(".happy-slider");
const bibleBox = document.querySelector(".happy-bible-box");
var pageTitle = document.getElementById("title");
var pageVerse = document.getElementById("verse");
const happyVerses = [{
title: "Psalm 28:7",
verse: "The Lord is my strength and shield. I trust him with all my heart. He helps me, and my heart is filled with joy.I burst out in songs of thanksgiving."
},
{
title: "Philippians 4:4",
verse: "Rejoice in the Lord always. Again I will say, rejoice!"
},
{
title: "John 15:11",
verse: "These things have I spoken to you, that My joy may remain in you, and that your joy may be full."
},
{
title: "2 Corinthians 6:10",
verse: "Our hearts ache, but we always have joy. We are poor, but we give spiritual riches to others.We own nothing, and yet we have everything."
},
];
console.log(happyVerses);
// Random verse
const randomVerse = happyVerses[Math.floor(Math.random() * happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
welcomeButton.onclick = () => {
welcomeBox.style.display = "none";
introQuestion.style.display = "flex";
}
happyButton.onclick = () => {
introQuestion.style.display = "none";
arrow.style.display = "block";
bibleBox.style.display = "block";
}
arrow.onclick = () => {
arrow.style.display = "none";
introQuestion.style.display = "flex";
bibleBox.style.display = "none";
}
changeText = () => {
pageTitle.innerHTML = newTitle;
pageVerse.innerHTML = newVerse;
}
nextVerseButton.onclick = () => {
for (i = 0; i < happyVerses.length; i++) {
changeText();
};
i++;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.fade {
transition: ease 0.3s;
opacity: 0;
}
button {
cursor: pointer;
transition: ease 0.3s;
}
button:hover {
background-color: white !important;
color: black !important;
transform: scale(1.1, 1.1);
}
.page-wrap {
width: 1000px;
max-width: 100%;
/*Wrapper width*/
margin-left: 5%;
/*Nice space between content and device border*/
margin-right: 5%;
/*Nice space between content and device border*/
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 500px;
position: relative;
}
#arrow {
align-self: flex-start;
position: absolute;
top: 0;
font-size: 2em;
color: white;
display: none;
cursor: pointer;
}
#header-2 {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#header-2 h1 {
color: white;
}
main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #0E7CFF;
}
#main-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#welcome-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#welcome h1 {
color: white;
margin-bottom: 12px;
}
#welcome-button {
padding: 12px 30px 12px 30px;
border: solid 1.5px white;
border-radius: 50px;
background-color: transparent;
color: white;
}
#button-div {
display: flex;
flex-direction: column;
display: flex;
justify-content: space-evenly;
max-width: 300px;
width: 100%;
}
#button-div button {
margin-top: 20px;
margin-bottom: 20px;
padding: 12px;
}
#intro-question {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: none;
}
#intro-question button {
padding: 12px;
border: solid 1.5px white;
border-radius: 50px;
background-color: transparent;
color: white;
}
#intro-question button:nth-child(1) {
margin-top: 0;
}
#intro-question button:nth-child(4) {
margin-bottom: 0;
}
#intro-question h1 {
font-size: 2em;
margin-bottom: 50px;
}
.happy-bible-box {
color: white;
max-width: 500px;
width: 100%;
display: none;
transition: ease 0.3s;
}
#title {
font-family: 'Baloo Bhaina 2', cursive;
font-weight: 400;
}
.happy-bible-box p {
margin-top: 12px;
margin-bottom: 30px;
font-family: 'Baloo Bhaina 2', cursive;
transition: all 0.5s;
}
.box-button {
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border: solid 1.5px white;
border-radius: 50px;
background-color: transparent;
color: white;
font-family: 'Baloo Bhaina 2', cursive;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Bible</title>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina+2:400,500&display=swap" rel="stylesheet">
</head>
<body>
<main id="main">
<div class="page-wrap">
<i class="fa fa-angle-left" id="arrow"></i>
<div id="welcome-box">
<h1>Welcome to Bible</h1>
<button id="welcome-button">Let's go</button>
</div>
<div id="intro-question">
<h1>How are you feeling today?</h1>
<div id="button-div">
<button id="happy">Happy</button>
<button id="anxious">Anxious</button>
<button id="worried">Worried</button>
<button id="lustful">Confused</button>
</div>
</div>
<article class="happy-bible-box">
<h2 id="title">John 15:11</h2>
<p id="verse">These things have I spoken to you, that My joy may remain in you, and that your joy may be full.</p>
<button class="box-button">Show me another</button>
</article>
</div>
You get random verse for once :
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
Put this in the changetext function to get random verse every time.
Like this:
changeText = () => {
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
pageTitle.innerHTML = randomVerse.title;
pageVerse.innerHTML = randomVerse.verse;
}
You have to put the randomVerse into changeText() function to get it executed everytime nextVerseButton is clicked
You don't need to for loop, just run the change function: changeText();
Your logic is a little confused. You need to get another random verse, your for loop is currently just setting the same thing everytime
nextVerseButton.onclick = () => {
let randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
changeText();
}
I'm trying to build a small game on my website to experiment with JavaScript that adds hotdogs to a bowl in random positions (building a pyramid shaped pile then covering the page).
But I'm not sure how to implement it. 10 hotdogs should go in the bowl, then 50 more should spill onto the 'game board,' then after that they would randomly cover the webpage. Right now I'm just wondering how to add the image elements onclick in random orientations using only HTML, CSS, and JavaScript if possible. Code shown below:
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>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="./resources/images/png/dog.png" alt="">
<img id = 'dogBowl' src="./resources/images/png/dogBowl.png" alt="">
<img class = 'hotdog' src="./resources/images/png/hot-dog.png" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by photo3idea_studio from www.flaticon.com</p>
<p class = 'attribute'>Dog bowl icon made by Good Ware from www.flaticon.com</p>
<p class = 'attribute'>Hotdog icon made by Freepik from www.flaticon.com</p>
</div>
<script src="game.js"></script>
</body>
</html>
CSS:
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
display: none;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
#media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
JavaScript:
let food = 0;
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
}
gameSpace.onclick = upDog;
Welcome, #drewemerine!
Right now I'm just wondering how to add the image elements onclick in random orientations using only HTML, CSS, and JavaScript if possible.
Instead of having an initial hotdog image in the HTML, I created a JavaScript function called makeHotDog() to create a hotdog image on the fly. It utilizes another function which just spits out random coordinates for the image. I hope this helps you out!
let food = 0;
let gameSpace = document.getElementById("gameSpace");
function getRandomPosition(element) {
let x = gameSpace.offsetHeight-element.clientHeight;
let y = gameSpace.offsetWidth-element.clientWidth;
let randomX = Math.floor(Math.random()*x);
let randomY = Math.floor(Math.random()*y);
return [randomX,randomY];
}
function makeHotDog() {
let img = document.createElement('img');
let xy = getRandomPosition(img);
img.setAttribute("src", "https://images.unsplash.com/photo-1515875976234-9d59c3ef288d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
img.setAttribute("class", "hotdog");
gameSpace.appendChild(img);
img.style.top = xy[0] + 'px';
img.style.left = xy[1] + 'px';
}
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
makeHotDog();
}
gameSpace.onclick = upDog;
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
position: relative;
overflow: hidden;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
width: 80px;
position: absolute;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
#media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
<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>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=660&q=80" alt="">
<img id = 'dogBowl' src="https://images.unsplash.com/photo-1510035618584-c442b241abe7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=80" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by photo3idea_studio from www.flaticon.com</p>
<p class = 'attribute'>Dog bowl icon made by Good Ware from www.flaticon.com</p>
<p class = 'attribute'>Hotdog icon made by Freepik from www.flaticon.com</p>
</div>
<script src="game.js"></script>
</body>
</html>