I am struggling to figure out how to refactor my JS for form validation. I figured out how to target each element using there ID, I just feel there has to be a better way to clean up this code using an array though. Any help would be appreciated. The commented out JS was my attempt at beginning to refactor.
"use strict"
//clunky code for error-img:
const fNameInput = document.getElementById("first-input");
const lNameInput = document.getElementById("last-input");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
fNameInput.addEventListener("blur", function(){
const errorImg1 = document.getElementById("error-img1");
if(!fNameInput.value){
errorImg1.classList.add("visible");
} else{
errorImg1.classList.remove("visible");
}
});
lNameInput.addEventListener("blur", function(){
const errorImg2 = document.getElementById("error-img2");
if(!lNameInput.value){
errorImg2.classList.add("visible");
} else{
errorImg2.classList.remove("visible");
}
});
emailInput.addEventListener("blur", function(){
const errorImg3 = document.getElementById("error-img3");
if(!emailInput.value){
errorImg3.classList.add("visible");
} else{
errorImg3.classList.remove("visible");
}
});
passwordInput.addEventListener("blur", function(){
const errorImg4 = document.getElementById("error-img4");
if(!passwordInput.value){
errorImg4.classList.add("visible");
} else{
errorImg4.classList.remove("visible");
}
});
// attempt at making clean code that applies to all inputs:
// const inputs = document.getElementsByTagName("input");
// const errorImgs = document.getElementsByClassName("error-img");
// //learn forEach loop:
// inputs[i].addEventListener("blur", () => {
// inputs.forEach(element => {
// if(!element.value){
// }
// });
// });
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body{
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container{
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas:
"left right"
"left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container{
grid-area: left;
}
.left-heading{
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content{
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container{
grid-area: right;
}
.right-top-container{
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special{
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text{
color: white;
font-weight: 400;
}
.right-form{
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas:
"fname"
"lname"
"email"
"password"
"submit-btn"
"bottom-text";
}
input{
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div{
grid-area: fname;
position: relative;
}
.last-name-div{
grid-area: lname;
position: relative;
}
.email-div{
grid-area: email;
position: relative;
}
.password-div{
grid-area: password;
position: relative;
}
.submit-btn-div{
grid-area: submit-btn;
}
#submit-btn{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text{
grid-area: bottom-text;
}
.footer-text{
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span{
color: hsl(0, 100%, 74%);
}
.error-img{
display: none;
position: absolute;
bottom: 75%;
right: 5%;
}
.visible{
display: block;
}
<!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>FrontEndMentor#3</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
<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=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br>
watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br>
Watching scripted tutorials is great, but understanding how <br>
developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name">
<span><img class="error-img" id="error-img1" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name">
<span><img class="error-img" id="error-img2" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com">
<span><img class="error-img" id="error-img3" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password">
<span><img class="error-img" id="error-img4" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
(Not all styling is complete, will do when JS is cleaned up)
To improve your JS logic you can apply the 'Don't Repeat Yourself' principle, or DRY. This means that you should avoid code repetition by genericising the logic as much as possible. The corollary effect of this is that the code can be made to work for an infinite number of form fields, so long as the HTML structure around them is consistent.
Here's an example of this for your use case. Note the use of a single class applied to all the fields to be validated, and also how DOM traversal is used to find the error img related to the current field only.
"use strict"
const fields = document.querySelectorAll('.to-validate').forEach(el => {
el.addEventListener('blur', e => {
let field = e.target;
field.closest('div').querySelector('.error-img').classList.toggle('visible', !field.value.trim().length);
});
});
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body {
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container {
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas: "left right" "left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container {
grid-area: left;
}
.left-heading {
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content {
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container {
grid-area: right;
}
.right-top-container {
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special {
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text {
color: white;
font-weight: 400;
}
.right-form {
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas: "fname" "lname" "email" "password" "submit-btn" "bottom-text";
}
input {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div {
grid-area: fname;
position: relative;
}
.last-name-div {
grid-area: lname;
position: relative;
}
.email-div {
grid-area: email;
position: relative;
}
.password-div {
grid-area: password;
position: relative;
}
.submit-btn-div {
grid-area: submit-btn;
}
#submit-btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text {
grid-area: bottom-text;
}
.footer-text {
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span {
color: hsl(0, 100%, 74%);
}
.error-img {
display: none;
position: absolute;
bottom: 75%;
right: 5%;
/* following rules only for this demo */
width: 20px;
height: 20px;
background-color: #C00;
}
.visible {
display: block;
}
<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=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br> watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br> Watching scripted tutorials is great, but understanding how <br> developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
It's worth noting, though, that what you're doing can be achieved simply by adding the required attribute to your input elements. Then there's no JS required at all.
You can do this with required attribute and css invalid selector. No need to code anything. But by default the error will show up.
input + span{
display: none;
color: red;
}
input:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
Now if you want it to show up, you would have to do what you are doing with blur and add a class it it was interacted with. Using foucsout with event delegation you just have to add one event listener to the form.
document.querySelector("form").addEventListener("focusout", function (e) {
const input = e.target.closest('input');
if (input) input.classList.add('touched');
});
input + span{
display: none;
color: red;
}
input.touched:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="José Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="nome#desk.com" pattern="+#desk.com" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>
openAb has a typo in html vs openAB function in js . Replace with
<img onclick="openAB()" ....
Your function name is openAB but you are calling openAb
<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">
I'm working on a footer which always be on the bottom of the page BUT isn't sticky. It's demand It'll be responsive. At the moment it's only on the bottom in two cases: first when I set bottom property to -350px (giving bottom:0px causing my footer lands somewhere in the middle of the page) or second when I manually change it's window size (as you probably notice I'm using Bootstrap).
Because I want to set a dynamic gallery in the future (when you scroll down the
more images will be appearing) I've tried to cope with this using JQuery but ... it seems to have some bugs I can't see. What should I do ?
$(document).ready(function() {
var currentHeight = $(document).height();
/*alert(currentHeight);*/
var currentFooter = currentHeight - 50;
$('footer').css("bottom", currentFooter);
$(window).on('scroll', function() {
/*var navHeight = $(window ).height() - 67;*/
var heHeight = $('.header').height();
if ($(window).scrollTop() > heHeight) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
});
nav {
margin-bottom: -10px;
margin-top: 0px;
width: 100%;
height: 80px;
display: inline-block;
position: relative;
z-index: 3;
top: -75px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(222, 213, 213, 0.75);
}
.sticky {
position: fixed;
top: 0;
}
section {
background-color: rgb(242, 242, 242);
width: 100%;
height: 130px;
padding-top: 10px;
padding-bottom: 15px;
}
nav h2 {
font-weight: 700;
display: inline-block;
padding-right: 15px;
margin-left: 39px;
}
nav p {
font-weight: bold;
display: inline-block;
letter-spacing: 2px;
}
nav p .yours {
letter-spacing: 3px;
}
section ul li {
list-style: none;
display: inline-block;
font-size: 12px;
margin-right: 9px;
}
section ul li a {
color: rgb(132, 132, 132);
text-decoration: none;
}
section li a:hover {
text-decoration: none;
color: black;
}
/*#lorem{
width:640px;
height:500vh;
font-size:14px;
padding-top:50px;
margin:0 auto 0;
}
*/
.bg-grey {
margin-top: 35px;
}
#their {
display: block;
/* padding-left: 10px;
margin-left:40px;
padding-right:500px;
margin-bottom: 60px;
padding-top:5px;
padding-bottom:5px;*/
width: 342px;
height: 15px;
background: rgb(242, 242, 242);
position: relative;
left: 250px;
margin-bottom: 60px;
}
p {
display: inline-block;
padding-left: 22px;
margin-top: 60px;
padding-top: 10px;
font-weight: bold;
}
#th p {
margin-top: 30px;
}
#th p:first-of-type {
margin-top: -20px;
}
.thumbnail {
border: none;
border-radius: 0;
background: rgb(85, 102, 119);
!important
}
#own {
position: absolute;
top: -100px;
padding: 20px 102px;
margin-right: -190px;
border-radius: 5px;
font-size: 13px;
font-weight: bold;
}
#own:hover {
/*background:rgba(255, 196, 0, 0.18); */
background: rgba(244, 97, 19, 0.72);
color: black;
}
#th {
/*
display: block;
position:relative;
top:-70px;
padding-top:20px;
right:-10px;
width:500px;
height: 2000px;
*/
display: block;
position: absolute;
top: 330px;
left: 810px;
margin-bottom: 30px;
}
#th input {
margin-left: 15px;
}
footer {
background-color: rgb(175, 175, 175);
position: relative;
width: 100%;
height: 80px;
/*bottom:-350px;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>TEAM</li>
<li>CONTACT</li>
</ul>
</section>
<nav>
<h2>TRAVEL MOOD</h2>
<p><span class="yours">what</span> is <span class="yours">your's ?</span></p>
</nav>
<div class="container-fluid all">
<div class="container-fluid">
<div class="row">
<p class="to_know">GET TO KNOW THEIR STORIES</p>
<div id="their"></div>
</div>
</div>
<div class="container-fluid bg-grey" id="portfolio">
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="china.jpeg" alt="china" class="img-responsive">
<p>Donald & Ronald</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="tatry.jpeg" alt="tatry" class="img-responsive">
<p>Louis</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="vienna.jpeg" alt="vienna" class="img-responsive">
<p>Alejandra</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
<div class="thumbnail">
<img src="croatia.jpeg" alt="croatia" class="img-responsive">
<p>Marlene & Rita</p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="almostcolorado.jpeg" alt="almostcolorado" class="img-responsive">
<p>X & Y </p>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<img src="country.jpeg" alt="county" class="img-responsive">
<p>Mr Doe & Mrs Doe</p>
</div>
</div>
</div>
<form id="th">
<div class="form-group row">
<div class="col-md-6">
<button type="submit" class="btn btn-sm active" id="own">CREATE YOUR OWN !</button>
</div>
</div>
<p>WEATHER</p><br>
<input type="radio" name="weather" value="no_matter" checked> no matter<br>
<input type="radio" name="weather" value="warmer"> warmer<br>
<input type="radio" name="weather" value="colder"> colder<br>
<input type="radio" name="weather" value="the_same"> the same<br>
<p>COMPANY</p><br>
<input type="radio" name="company" value="some_time_alone" checked> no matter<br>
<input type="radio" name="company" value="couple"> couple<br>
<input type="radio" name="company" value="with_family"> with family<br>
<input type="radio" name="company" value="girls_boys_adventure"> girls/boys adventure<br>
<p>HOW FAR</p><br>
<input type="radio" name="location" value="another city" checked> another city<br>
<input type="radio" name="location" value="another country"> another country<br>
<input type="radio" name="location" value="another continent"> another continent<br>
<p>PLACE WHERE YOU CAN</p><br>
<input type="radio" name="activity" value="active"> stay active<br>
<input type="radio" name="activity" value="leisure"> have some leisure time<br>
<input type="radio" name="activity" value="party"> part..y/cipate<br>
<input type="radio" name="activity" value="culture"> bite some culture<br>
</form>
</div>
<footer></footer>
</div>
As you can see on this website http://www.templategarden.com/preview/tempo/template/index.html In the portfolio section different divs appear on clicking the buttons. And the size of the main Container also increases or decreases accordingly. I guess JS/Jquery will be required. Please help guys I am new to web development and am stuck here.
.wrap {
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
#portone {
text-align: center;
margin-top: 80px;
}
.porttwo {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: uppercase;
}
#portthree {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 2.1;
}
/*buttons starts here*/
#select {
width: 660px;
height: 45px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
.buttonz {
margin-left: 9px;
padding: 10px 22px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background-color: #f7f7f7;
border: 1px solid #f7f7f7;
cursor: pointer;
}
.buttonz:hover {
background-color: #7cc576;
border-color: #7cc576;
color: #fff;
transition: ease 0.5s;
}
/*buttons end here*/
#portfolio_img {
margin-top: 50px;
}
.project {
margin-left: 16px;
margin-bottom: 90px;
}
<section class="wrap">
<div id="portone">
<h1 class="porttwo" id="portfolio">portfolio</h1>
<h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div>
<!--buttons starts here-->
<div id="select">
<input class="buttonz" name="button" type="button" value="ALL">
<input class="buttonz" name="button" type="button" value="BRANDING">
<input class="buttonz" name="button" type="button" value="WEB DESIGN">
<input class="buttonz" name="button" type="button" value="PRINT DESIGN">
<input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div>
<!--buttons end here-->
<!--portfolio images starts here-->
<div id="portfolio_img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img">
<img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img">
</div>
<!--portfolio images ends here -->
</section>
JS/JQ not required. Check this. U can change the attributes all, web, app, brand belonging to the list
<div class="item" all brand web>1</div>
.item {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 16px 16px 0;
line-height: 100px;
text-align: center;
color: #08f;
font-size: 100px;
background-color: lightblue;
}
.item,
input[type="radio"] {
display: none;
}
label {
display: inline-block;
border: 1px solid #000;
padding: 1em;
margin-bottom: 16px;
}
label:hover {
background-color: blue;
color: #fff;
}
#rball:checked ~ .item[all] {
display: inline-block;
}
#rbweb:checked ~ .item[web] {
display: inline-block;
}
#rbapp:checked ~ .item[app] {
display: inline-block;
}
#rbbrand:checked ~ .item[brand] {
display: inline-block;
}
hr {
border: transparent;
padding: 0;
margin: 0;
}
<input name="rb" type="radio" id="rball" checked><label for="rball">All</label>
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label>
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label>
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label>
<hr>
<div class="item" all brand web>1</div>
<div class="item" all app>2</div>
<div class="item" all brand>3</div>
<div class="item" all web>4</div>
<div class="item" all app web>5</div>
<div class="item" all web>6</div>
<div class="item" all app>7</div>
<div class="item" all web>8</div>
I am following the tutorial from http://www.sitepoint.com/building-list-jquery-local-storage/
to build a todo list and I want to display for elements in the same line. At the moment form elements are stacked over each other and displayed vertically but I want them to be displayed vertically. I ultimately want to achieve a result that looks like this:
Here is the CSS Code
.task-list{
width: 250px;
float: left;
margin: 0 5px;
background-color: #e3e3e3;
min-height: 240px;
border-radius: 10px;
padding-bottom: 15px;
}
.task-list input, .task-list textarea{
width: 240px;
margin: 1px 5px;
}
.task-list input{
height: 30px;
}
.todo-task{
border-radius: 5px;
background-color: #fff;
width: 230px;
margin: 5px;
padding: 5px;
}
.task-list input[type="button"]{
width: 100px;
margin: 5px;
}
.todo-task > .task-header{
font-weight: bold;
}
.todo-task > .task-date{
font-size: small;
font-style: italic;
}
.todo-task > .task-description{
font-size: smaller;
}
Here is the html code
<div class="task-list">
<h3>Add a task</h3>
<form id="todo-form">
<input type="text" placeholder="Task Name" />
<textarea placeholder="Description"></textarea>
<input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" />
<input type="button" class="btn btn-primary" value="Add Task" onclick="todo.add();" />
</form>
<input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" />
<div id="delete-div">
Drag Here to Delete
</div>
</div>
<div class="task-list task-container" id="pending">
<h3>Pending</h3>
<!--<div class="todo-task">
<div class="task-header">Sample Header</div>
<div class="task-date">25/06/1992</div>
<div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
</div>-->
</div>
You just need to change
.task-list {
width: 250px;
(found at the very top of your css)
to something like
.task-list {
width: 850px;
this would then give all the elements within the space room to stand side by side...