How can I align these list elements with some buttons? - javascript

I want to align some list elements that are created via Javascript with their corresponding buttons. Every time I add a new element to the list, the text appears in a lower position than the "X/Remove element" buttons. Can you please tell me what I'm doing wrong?
You can check the pen right here:
https://codepen.io/Watashi10/pen/RwwQegr
The ideal thing would be to have the list elements and the X buttons in the same line or at the same height under the "input" element.
Here is a screenshot of the actual list
HTML:
<body>
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 id="header">My Shopping List</h1>
</header>
<input class="text-center col-6" id="userinput" type="text" placeholder="add items">
<section class="row">
<button id="enter">Enter</button>
</section>
<div class="text-center col-12" id="shopping">
<ul class="list" style="list-style: none">
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
CSS:
body,
html {
width: 100%;
height: 100%;
font-family: 'Fjalla One', sans-serif;
background: url("https://wallpaperplay.com/walls/full/5/6/5/68320.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 15vw;
margin: 0 auto;
min-height: 50vh;
}
.row {
display: flex;
justify-content: center;
flex-direction: row;
}
#header {
display: inline-block;
position: relative;
bottom: 200px;
font-family: 'Fredericka the Great';
font-size: 5rem;
color: white;
}
input {
flex-grow: 5rem;
border: none;
padding: 25px;
}
button {
border: 1px solid;
background: blue;
color: white;
}
input, button {
position: relative;
bottom: 50px;
}
.userinput {
float: left;
}
h2 {
font-family: 'Fredericka the Great';
color:#FFB6C1;
font-size: 12px;
}
ul li {
padding: 3rem;
font-family: 'Fredericka the Great';
font-size: 25px;
color: #ffffff;
}
.done {
text-decoration: line-through;
}
I would appreciate any kind of help. Thank you!

Remove the bottom: 50px from
input, button {
position: relative;
bottom: 50px; //remove this
}
or if you want input to have bottom: 50px; seperate the css styling of them.
input {
position: relative;
bottom: 50px;
}
button {
position: relative;
margin-left: 15px !important; //just to make it a little nicer
}

So you're creating a textnode from the user input box here:
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
I would recommend making this a div or a p or something else that can be styled. Like so:
let inputValue = document.createElement('div');
inputValue.innerHTML = input.value;
li.prepend(inputValue)
input.value = "";
So you're li sctucture should look more like this:
<li>
<div class="value"></div>
<button></button>
</li>
After that, theres many ways to have these be inline. You could style the li to have a display: flex, or you could float the button to the right within the li. But I would start with making the value that you catch and put into the li something besides just the textNode.

Related

Need help to span <div> elements in one row

I want exactly like this website: https://www.petzl.com/INT/en
I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.
I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.
If I dont use this line "place-content:center;" it places it to left with a lot of spaces.
My website link: beta.edgerope.com
Please find code below:
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:
You can use CSS flex property something like this
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}

Simple scrollX element with scroll snap, Changing page numbers

I'm trying to create simple element with scroll snapping. I've created a demo in Codepen.
I would like to scroll to an other image and after scroll, when other image is visible, change page number and the color of bottom circles.
I've tried to put onscroll"function()" in div .container and calculate somehow winW & scrollX ratios, but this approach is buggy and messy.
How should I make it, please? Thanks a lot. 🙏
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
display: flex;
overflow: auto;
flex: none;
width: 100vw;
height: 100vw;
flex-flow: row nowrap;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none;
}
.pagination {
position: absolute;
top: 16px;
right: 16px;
background: #777;
color: #fff;
line-height: 40px;
width: 50px;
font-size: 12px;
border-radius: 20px;
text-align: center;
}
.image {
width: 100vw;
height: 100vw;
scroll-snap-align: center;
flex: none;
}
#image-1 {
background: url("https://i.ibb.co/fMp05Jf/tamanna-rumee-ov-U2t-Rgfj-H8-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-2 {
background: url("https://i.ibb.co/Fx3Vm0S/pranav-madhu-KHD8vyputcg-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-3 {
background: url("https://i.ibb.co/4Fznzvs/tijana-drndarski-cj-Es-Ho-Pk-ZOQ-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-4 {
background: url("https://i.ibb.co/bPWXGfR/kristaps-ungurs-trs-Gn-MDb-T2-E-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
#image-5 {
background: url("https://i.ibb.co/5jyBdGK/joanna-kosinska-pj-Pe-CRkl83-M-unsplash.jpg");
background-size: cover;
beckground-position: center;
}
.pills {
padding: 8px;
display: flex;
justify-content: center;
}
.circle {
margin: 8px;
height: 10px;
width: 10px;
border-radius: 5px;
background: #ccc;
}
#circle-1 {
background: #777;
}
<div class="container x mandatory-scroll-snapping"">
<div class="pagination">1 / 5</div>
<div class="image" id="image-1"></div>
<div class="image" id="image-2"></div>
<div class="image" id="image-3"></div>
<div class="image" id="image-4"></div>
<div class="image" id="image-5"></div>
</div>
<div class="pills">
<div class="circle" id="circle-1"></div>
<div class="circle" id="circle-2"></div>
<div class="circle" id="circle-3"></div>
<div class="circle" id="circle-4"></div>
<div class="circle" id="circle-5"></div>
</div>
You could simply add anchor tags with the ID name of the slide to automatically scroll to them:
pills (with anchor tag)
<div class="pills">
<a href="#image-3">
<div class="circle" id="circle-1"></div>
</a>
</div>

scroll animation with html # tags

I currently am trying to code a website to animate moving across the x-axis to access different sections of the page (page content in 'tab-content'). I have a navbar that has different headers, this is fixed, I want the user to click on each header and be taken to that section. I managed to take the user to the desired section/div with some JS code however, there isn't any animation it defaults to the selected section/div just suddenly being on screen. How do I animate with pure JS or CSS. I need the clicking of the header to move (motion) the user to that div. I'm new to web dev.
here some of my code
HTML
<div class="main-info">
<div class="nav-container">
<div class="nav-bar">
<ul>
<li data-tab-target="#show" class="tab">Show</li>
<li data-tab-target="#about" class="tab">About</li>
<li data-tab-target="#lookbook" class="tab">Lookbook</li>
<li data-tab-target="#process" class="tab">Process</li>
</ul>
</div>
<div class="info overlay">
<div class="text">
MA
Coming Soon
BA
</div>
Back
</div>
</div>
<div class="tab-content">
<div id="show" data-tab-content class="active">
<p>VIDEO</p>
</div>
<div id="about" data-tab-content>
<p>About</p>
</div>
<div id="lookbook" data-tab-content>
<p>Lookbook</p>
</div>
<div id="process" data-tab-content>
<p>Process</p>
</div>
</div>
</div>
CSS
.main-info {
background-color: transparent;
height: 100vh;
overflow: hidden;
}
.nav-container {
position: fixed;
}
.nav-bar {
width: 80vw;
height: 10vh;
left: 10vw;
position: absolute;
top: 5vh;
}
.nav-bar ul {
text-transform: uppercase;
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.tab a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1rem;
color: black;
text-decoration: none;
}
.tab:hover {
cursor: pointer;
opacity: 0.6;
}
.tab.active {
background-color: whitesmoke;
}
.info {
width: 90vw;
height: 10vh;
/* border: 1px solid red; */
left: 5vw;
position: absolute;
top: 80vh;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.info a {
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 1.1rem;
color: black;
text-decoration: none;
border: 1px solid teal;
}
.text {
width: 30%;
display: flex;
justify-content: space-between;
}
.tab-content {
border: 1px solid teal;
position: absolute;
left: 0;
top: 0;
height: 100vh;
z-index: -11;
display: flex;
flex: row nowrap;
justify-content: flex-start;
}
[data-tab-content] {
border: 1px solid blueviolet;
background-color: violet;
font-size: 3rem;
color: blue;
scroll-behavior: smooth;
display: none;
width: 100vw;
height: 100vh;
}
.active[data-tab-content] {
display: block;
}
JS
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]')
// loop through the list to find the one tab mouse clicked
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
});
tab.classList.add('active')
target.classList.add('active');
});
});
You almost got it. Instead of setting the scroll-behavior on the elements that are inside a scrollable element, put it on either the element that has a scrollbar.
.tab-content {
scroll-behavior: smooth;
}
Or on the top most element to have all elements move with a smooth scrolling animation.
:root {
scroll-behavior: smooth;
}

Set div with text to start where another div that is positioned center starts

I've got some text that is positioned center of the container and I would like to have some other text that starts where the text positioned in center starts (these divs are not having the same length so here is the problem) I tried by adding jquery to get the X position but no success, and I have no clue how to solve it only with css.
Here's my code:
<div class="graphic-icons-page">
<div class="container icons-container">
<div class="icons-software-title-left">Wide</div>
<div class="icons-software-title-center text-center"><span>Text in center</span></div>
</div>
</div>
.icons-container{
height:80vh;
background-color: black;
color:white;
}
.graphic-icons-page{
display: flex;
justify-content: center;
align-items: center}
///test
.icons-software-title-center{
width: 100%;
}
.icons-software-title-left{ font-size: 50px;}
.icons-software-title-center{
font-size:50px
}
Here's how I want to look:
I added one div and move the icons-container inside the other container. Would this work?
In this fiddle, I added bootstrap css to test https://jsfiddle.net/1aywg3Lm/
body {
background-color: black;
}
.container-center {
text-align: center;
}
.icons-container{
height:80vh;
background-color: black;
color:white;
display: inline-block;
text-align: left;
}
.graphic-icons-page{
display: flex;
justify-content: center;
align-items: center}
///test
.icons-software-title-center{
width: 100%;
}
.icons-software-title-left{ font-size: 20px;}
.icons-software-title-center{
font-size:20px
}
<div class="graphic-icons-page">
<div class="container">
<div class="icons-container">
<div class="icons-software-title-left">Wide</div>
<div class="icons-software-title-center text-center"><span>Text in center of the page</span></div>
</div>
</div>
</div>
I solved my issues using width:max-content
.container-center {
text-align: center;
width: 100%;
background-color: black;
}
.icons-container{
height:80vh;
background-color: black;
color:white;
display: inline-block;
text-align: left;
width: max-content;
}

How can I make these divs move under each other with page responsiveness?

I have a row of divs with images within them that looks like this:
And when I change the page size, essentially what it will look like on mobile devices the divs begin to fall below each other like this:
Which is amazing because it's exactly what I want. But I have another row of divs that look like this:
But when I change the page size, this set of divs don't fall under each other like the other divs. They're just cut off by the page so essentially these divs are not mobile responsive. Can anybody help me with have to get these second set of divs responsive like the first set?
Thank you in advance!
HTML:
<div class="row-fluid" id="extras">
<div class="container-fluid">
<div class="row-fluid flex">
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/05/socialmed.png" width="155" height="auto" max-width="100%"/>
</div>
<div class="block text-center">
<ul class="aboutli">
<li><a target="_blank" href="http://mysite/information">About Us</a></li>
<li><a target="_blank" href="http://mysite/information">FAQ's</a></li>
<li><a target="_blank" href="http://mysite/information">Contact Us</a></li>
<li><a target="_blank" href="http://mysite/information">Work With Us</a></li>
<li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li>
<li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li>
<li><a target="_blank" img src="http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li>
</ul>
</div>
<div class="block text-center">
<div id="words">
<p class="become">become a driver</p>
<p class="driver-para">As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in join our team click the button below to see the available opportunities we have available.</p>
<input type="submit" id="driver-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/>
</div>
</div>
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/07/testimg.png" width="200" height="auto"/>
</div>
</div>
</div>
</div>
CSS:
#extras {
height: auto;
width: 100%;
overflow: hidden;
background-color: #fff;
}
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
#words {
width: 300px;
height: auto;
}
#linksdrinks {
margin-top: 70px;
margin-right: 70px;
width: 160px;
height: 238px;
display: inline-block;
vertical-align: top;
}
ul.aboutli {
color: #000000;
font-size: 13px;
margin: 0;
text-decoration: none;
list-style-type: none !important;
line-height: 0.8cm;
}
#drinkaware {
width: 156px;
height: 50px;
display:list-item;
background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png');
background-size: 150px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
vertical-align: top;
list-style-type: none !important;
}
#driver {
margin-left: 70px;
margin-right: 70px;
padding: 5px;
width: 300px;
height: auto;
display: inline-block;
}
.become {
color: #a6a6a6;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.driver-para {
font-size: 13px;
}
#driver-btn {
color: #fd0e35;
font-size: 11px;
font-weight: bold;
text-shadow: none;
padding: 7px;
background-color: #fff;
border: 2px solid #fd0e35;
box-shadow: none;
border-radius: 4px;
outline: none;
}
#driver-btn:hover {
color: #fff;
background-color: #fd0e35;
}
#open24 {
display: inline-block;
width: 200px;
height: auto;
background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png');
background-size: 250px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}
You can try this
#media screen and (max-width:767px){
.flex {
display: block;
}
}
Try with this code. Write your below css in media query
#media (min-width:767px) {
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
}
Also for cross browser support display: inline-flex; is now display: flex;
be sure to use
http://autoprefixer.github.io/
You can try below code.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

Categories