CodingPhase Mentorship 2nd Project

Developer
John
Size
4,994 Kb
Views
4,048
  1. CodingPhase Mentorship 2nd Project Previews
  2. CodingPhase Mentorship 2nd Project HTML Codes
  3. CodingPhase Mentorship 2nd Project CSS Codes
  4. CodingPhase Mentorship 2nd Project JS Codes

How do I make an codingphase mentorship 2nd project?

Loop through an array of users. Can also add more users. What is a codingphase mentorship 2nd project? How do you make a codingphase mentorship 2nd project? This script and codes were developed by John on 05 January 2023, Thursday.

CodingPhase Mentorship 2nd Project Previews
IQ Test

CodingPhase Mentorship 2nd Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CodingPhase Mentorship 2nd Project</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header> <div class="Flex"> <i class="fa fa-th-large"></i> <h5>Board</h5> </div> <div class="Flex"> <i class="fa fa-search"></i> <h5>Search...</h5> </div> <div class="Flex" id="logo"> <h2>Trello</h2> <i class="fa fa-step-backward"></i> </div> <div class="Flex user"> <img src="https://d3iw72m71ie81c.cloudfront.net/female-18.jpg"/> <h4>Hello, Anna!</h4> </div> <div class="Flex"> <i class="fa fa-bell-o"></i> </div> <div class="Flex"> <i class="fa fa-navicon"></i> </div> </header> <div class="options Flex"> <div class="totalMembers"> <i class="fa fa-star"></i> <div> <h4>Team Members (6)</h4> <p>Netguru</p> </div> </div><!--totalMembers--> <div class="buttons"> <button>All members</button> <button>My team</button> </div><!--buttons end--> <div class="filter Flex"> <button><i class="fa fa-filter"></i></button> <div class="displayTeams"> <button><i class="fa fa-th-large"></i></button> <button><i class="fa fa-align-left"></i></button> </div> </div><!--filter--> </div><!--options--> <div class="team"> </div><!--team--> <button class="add-user"> <i class="fa fa-plus"></i> </button>
</div><!--container end-->
<!--MODAL-->
<div id="modal"> <div id="content" class="animate"> <form> <label for="name">Name</label> <input id="name" type="text" placeholder="John Doe" required/> <label for="username">User Name</label> <input id="username" type="text" placeholder="@jondoe" required/> <div class="form-btns"> <a href="#" id="cancel-btn">Cancel</a> <button class="new-user">Add User</button> </div> </form> </div><!--content end-->
</div><!--modal end--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CodingPhase Mentorship 2nd Project - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Pacifico');
h2,h5,h4,h6{ margin:0;
}
body{ height:100vh; background:-webkit-linear-gradient(315deg,rgb(243,243,243) 0%,rgb(243,243,243) 51%,rgb(79,119,192) 51%, rgb(79,119,192) 100%); background:linear-gradient(135deg,rgb(243,243,243) 0%,rgb(243,243,243) 51%,rgb(79,119,192) 51%, rgb(79,119,192) 100%);
}
.container{ background:rgb(243,243,243); width:1000px;
/* height:600px; */ margin:20px auto; padding-bottom:40px; border-radius:4px; overflow:hidden; box-shadow:0 5px 10px rgba(0,0,0,.3); position:relative;
}
/*****************
MAIN HEADER
*****************/
header{ background:white; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-pack:distribute; justify-content:space-around; color:rgb(190,190,190); padding:10px 0; line-height:0; box-shadow:0 3px 10px lightgray;
}
.Flex{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:0 10px;
}
header .fa{ margin:0 10px;
}
#logo{ -webkit-box-flex:1; -ms-flex:1; flex:1; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; color:rgb(71,135,246); font-family: 'Pacifico', cursive; -webkit-transform:translateX(50px); transform:translateX(50px);
}
#logo h2{ font-weight:inherit; letter-spacing:2px;
}
#logo i{ color:rgb(190,190,190); font-size:16px; color:lightgray; -webkit-transform:rotate(90deg); transform:rotate(90deg);
}
.user img{ width:40px; margin-right: 15px; border-radius:5px;
}
.user h4{ font-size:14px;
}
.Flex:nth-of-type(6){ padding:0 10px; border-left:2px solid rgba(190,190,190,.3);
}
/*************
USER OPTIONS
**************/
.options{ margin:30px 10px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
}
.totalMembers{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.totalMembers .fa-star{ color:white; background:rgb(71,135,246); padding:10px; margin-right:10px; border-radius:5px; box-shadow:0 3px 5px rgb(71,135,246);
}
.totalMembers p{ margin:0; margin-left:2px; font-size:12px; letter-spacing:1.1px; color:gray;
}
.options .buttons{ display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
}
/**********
BUTTONS
**********/
.options .buttons button{ background:none; border:solid 1px lightgray; padding:10px 25px; border-radius:3px; font-size:14px;
}
.options .buttons button:nth-of-type(1){ background:white; border-color:white; font-weight:bold; border-top-right-radius:0; border-bottom-right-radius:0; box-shadow:-3px 3px 10px lightgray;
}
.options .buttons button:nth-of-type(2){ border-top-left-radius:0; border-bottom-left-radius:0;
}
/**************
FILTER BUTTONS
**************/
.options .filter button{ border:0; background:none; color:lightgray; padding:10px 15px; font-size:20px; border-radius:4px;
}
.options .filter .displayTeams{ display:-webkit-box; display:-ms-flexbox; display:flex;
}
.options .filter .displayTeams button:nth-of-type(1){ background:white; border:0;
}
/************
CARDS
*************/
.team { padding: 20px; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap;
}
.team a { text-decoration: none; color: lightgray; -webkit-transition:.4s; transition: .4s;
}
.team a:hover { color:rgb(71,135,246);
}
.team .card{ background:white; height:370px; width:225px; border-radius: 3px; box-shadow: 0 5px 15px rgba(0,0,0,.3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-right:15px; margin-bottom:15px;
}
.team .card figure {
/* border:solid 1px red; */ text-align: center;
}
.team .card figure img{ width:100px; margin-bottom: 15px; border-radius:50%; box-shadow: 0 4px 8px lightgray;
}
.team .card figure figcaption h4, h5 { font-weight: 500;
}
.team .card figure figcaption h5 { color: lightgray; line-height: 2;
}
.team .card .links { border-bottom: solid 1px lightgray; padding-bottom:20px; display: -webkit-box; display: -ms-flexbox; display: flex;
}
.card .links a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align:center; font-size:18px;
}
.card .task {
/* border: solid 1px red; */ padding:15px 25px 0; margin-bottom:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
}
.card .task div { line-height:0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; text-align:center;
}
.card .task div h1 { margin:10px 0 15px; font-weight:500;
}
.card .task div p { color: lightgray; font-size: 14px;
}
.card .bottom-links { border-top:solid 1px lightgray; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.card .bottom-links a { -webkit-box-flex:1; -ms-flex:1; flex:1; text-align:center; font-size: 11px; font-weight:bold; padding:14px; letter-spacing: 1px;
}
.card .bottom-links a i { font-size:17px; margin-right: 5px;
}
.card .bottom-links a:first-child { border-right: solid 1px lightgray;
}
/* ADD USER BUTTON
*/
.add-user { background:rgb(71,135,246); box-shadow:0 3px 10px rgb(71,135,246); border:0; color:white; padding:14px 16px; border-radius:50%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; position:absolute; bottom:20px; right:25px; cursor:pointer;
}
.add-user:hover { background:rgb(71,135,230);
}
/* MODAL
*/
#modal{ display:none; background:rgba(0,0,0,.8); position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; padding-top:60px;
}
#content{ padding:20px 15px; width:350px; background:rgb(79,119,192); box-shadow:0 5px 20px rgba(0,0,0,.6); margin:auto; border-radius:5px;
}
form{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
}
form label{ margin-bottom:5px; font-weight:bold; color:white;
}
form input{ margin-bottom:15px; padding:8px 5px; border:0;
}
.form-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;
}
.form-btns a { color: white;
}
form .new-user{ background:white; color:rgb(79,119,192); border:0; width:150px; margin-left:auto; padding:10px 0; cursor:pointer; -webkit-transition:.5s; transition:.5s;
}
form .new-user:hover{ border-radius:20px;
}
.animate{ -webkit-animation: animatezoom 0.4s; animation: animatezoom 0.4s;
}
@-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}
}
@keyframes animatezoom { from {-webkit-transform: scale(0);transform: scale(0)} to {-webkit-transform: scale(1);transform: scale(1)}
}

CodingPhase Mentorship 2nd Project - Script Codes JS Codes

$(document).ready(function() { var users = [ { image: 'https://d3iw72m71ie81c.cloudfront.net/male-104.jpg', name: 'Shawn Garner', handle: '@onlydesign', task: 68 }, { image: 'https://d3iw72m71ie81c.cloudfront.net/male-17.jpg', name: 'Mathew Carron', handle: '@mathew', task: 0 }, { image: 'https://d3iw72m71ie81c.cloudfront.net/female-68.jpg', name: 'Leona Curtis', handle: '@norules', task: 34 }, { image: 'https://d3iw72m71ie81c.cloudfront.net/female-19.jpg', name: 'Atla Black', handle: '@atlablack', task: 74 }, { image: 'https://d3iw72m71ie81c.cloudfront.net/female-70.jpg', name: 'Abbie Roy', handle: '@abbie', task: 0 }, { image: 'https://d3iw72m71ie81c.cloudfront.net/dc506abf-7317-43f5-8415-ef3705b8f480-subarna.jpeg', name: 'Juan Bennett', handle: '@bennet', task: 0 }, { image: 'https://d3iw72m71ie81c.cloudfront.net/bac97ee5-514d-41d5-b5f3-555e718fc959-fotoperfil.jpg', name: 'Jared Lambert', handle: '@jared89', task: 21 } ]; users.forEach(function(user) { $('.team').append(`<div class="card"> <figure> <img src="${user.image}" />
<figcaption> <h4>${user.name}</h4> <h5>${user.handle}</h5>
</figcaption>
</figure>
<div class="links"> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-bell-o"></i></a> <a href="#"><i class="fa fa-trash-o"></i></a>
</div>
<div class="task"> <div> <h1>${user.task}</h1> <p>Open Task</p> </div>
</div>
<div class="bottom-links"> <a href="#"><i class="fa fa-th-large"></i> CARDS</a> <a href="#"><i class="fa fa-user-o"></i> PROFILE</a>
</div>
</div>`); }); // when user clicks add btn, modal will pop up $('.add-user').on('click', function() { $('#modal').css('display','block'); }); // Close modal when user clicks cancel $('#cancel-btn').on('click', function(e) { e.preventDefault(); $('#modal').css('display','none'); }); // when form is submited, it will create a new card with the users name and username $('form').on('submit', function(e){ e.preventDefault(); var name = $('#name').val(); var userName = $('#username').val(); // CREATE A NEW CARD $('.team').append(`<div class="card"> <figure> <img src="http://style.anu.edu.au/_anu/4/images/placeholders/person.png" />
<figcaption> <h4>${name}</h4> <h5>${userName}</h5>
</figcaption>
</figure>
<div class="links"> <a href="#"><i class="fa fa-pencil"></i></a> <a href="#"><i class="fa fa-bell-o"></i></a> <a href="#"><i class="fa fa-trash-o"></i></a>
</div>
<div class="task"> <div> <h1>0</h1> <p>Open Task</p> </div>
</div>
<div class="bottom-links"> <a href="#"><i class="fa fa-th-large"></i> CARDS</a> <a href="#"><i class="fa fa-user-o"></i> PROFILE</a>
</div>
</div>`); // when form is submited, REMOVE THE MODAL $('#modal').css('display','none'); name = $('#name').val(''); userName = $('#username').val(''); });
});
CodingPhase Mentorship 2nd Project - Script Codes
CodingPhase Mentorship 2nd Project - Script Codes
Home Page Home
Developer John
Username -J0hn-
Uploaded January 05, 2023
Rating 3
Size 4,994 Kb
Views 4,048
Do you need developer help for CodingPhase Mentorship 2nd Project?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John (-J0hn-) Script Codes
Name
Netflix with slick carousel plugin
IMDb design concept from dribbble
Sort movies with React JS
Airbnb
Beats By Dre website
Add To Cart jquery
FullPage.js movies
E commerce website from dribbble
A Pen by John
Suicide Squad Bootstrap collapse
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!