seems px-s are not the same as in design

seems px-s are not the same as in design - javascript

I have header panel in my project, where burger button is designed with width 32px and height 24px.
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blueeye</title>
<link rel="stylesheet" href="index.css">
<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=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="logo">
<span class="logoStart">blue</span><span class="logoEnd">eye</span>
</div>
<div class="BurgerMenu">
<div class="menuLine menuLine1"></div>
<div class="menuLine menuLine2"></div>
<div class="menuLine menuLine3"></div>
</div>
</div>
</body>
</html>
* {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
.logo {
margin: 16px;
font: normal normal bold 40px/49px Montserrat;
}
.logoStart {
color: #041731;
}
.logoEnd {
color: #1B6FE0;
}
.menuLine {
height: 6px;
width: 32px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #041731;
margin-bottom: 3px;
}
.BurgerMenu {
margin-right: 16px;
}
* {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
.header {
display: flex;
font-weight: bold;
font-size: 50px;
height: 100px;
border: 1px solid black;
position: relative;
justify-content: space-between;
align-items: center;
}
.logo {
margin: 16px;
font: normal normal bold 40px/49px Montserrat;
}
.logoStart {
color: #041731;
}
.logoEnd {
color: #1B6FE0;
}
.menuLine {
height: 6px;
width: 32px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #041731;
margin-bottom: 3px;
}
.BurgerMenu {
margin-right: 16px;
}
I get this in browser
but in design seems burger icon is larger.
I gave the same parameters for height and width as in design.
Header in design
what I'm doing wrong, that I can't get same view as in design?

<meta name="viewport" content="width=device-width, initial-scale=1">
I should add this in my html page

Related

how to make a li tag horizontal while its a block

I want to make a online card game with html/css/js and i want to make a place that shows all your cards but i want them to be inline and inline-block because i need to give it a custom width and height but when i do that it doesnt work
heres the code :
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: inline-block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: inline;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!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="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
if you run the snippet its not horizontal
please help me i need help fast

Instead of making it inline u should make it display: flex
edit: to make cards go to next line use flex-wrap: wrap
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: flex;
flex-wrap: wrap;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!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="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>

How I show value of an input inside a span tag in the form of typing effect?

When I click the write button, the value of input should be displayed inside span with id caption in the form of typing effect. But the speed of typing of any character should be 30ms. to this mean when displayed the first character, the second character displayed with a delay of 30ms And also to the end. displaying of text does with a delay of 30ms(the first setTimeout). I wrote the below code but it did not work. the output is in to form of numbers. how to fix it?
const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");
function typing() {
const input_array = input.value.split("");
setTimeout(myfunction(), 30);
function myfunction() {
for (let i = 0; i < input_array.length; i++) {
caption.innerHTML += setTimeout(function() {
return input_array[i];
}, 30);
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
background-color: #505050;
}
.container {
background-color: black;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
gap: 8px;
width: 680px;
height: 360px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.console {
margin: 0;
color: #fff;
font-size: 27px;
}
#cursor {
display: inline-block;
width: 16px;
height: 4px;
margin-bottom: -5px;
margin-left: 5px;
background-color: #fff;
animation: cursorMotion 1s 0.5s ease infinite;
}
#keyframes cursorMotion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.main {
height: 80%;
padding: 40px;
padding-bottom: 0;
}
.footer {
height: 20%;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.footer button {
height: 35px;
min-width: 120px;
font-family: inherit;
cursor: pointer;
font-size: 16px;
}
.footer input {
height: 35px;
width: 230px;
font-family: inherit;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font#v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
<title>تایپ کردن</title>
</head>
<body>
<div class="container">
<main class="main">
<p class="console">
<span>C:\</span>
<span id="caption"></span>
<span id="cursor"></span>
</p>
</main>
<footer class="footer">
<input type="text" id="user-caption" placeholder="your text ..." />
<button id="test-typing" onclick="typing()">write</button>
<button id="test-erasing">eraser</button>
</footer>
</div>
<script src="main.js"></script>
</body>
</html>

const caption = document.getElementById("caption");
const input = document.getElementById("user-caption");
function typing() {
const input_array = input.value.split("");
myfunction(input_array);
function myfunction(input) {
if (!input.length) return;
const w = input.shift();
caption.innerHTML += w;
setTimeout(() => myfunction(input), 30);
}
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
background-color: #505050;
}
.container {
background-color: black;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
gap: 8px;
width: 680px;
height: 360px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.console {
margin: 0;
color: #fff;
font-size: 27px;
}
#cursor {
display: inline-block;
width: 16px;
height: 4px;
margin-bottom: -5px;
margin-left: 5px;
background-color: #fff;
animation: cursorMotion 1s 0.5s ease infinite;
}
#keyframes cursorMotion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.main {
height: 80%;
padding: 40px;
padding-bottom: 0;
}
.footer {
height: 20%;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.footer button {
height: 35px;
min-width: 120px;
font-family: inherit;
cursor: pointer;
font-size: 16px;
}
.footer input {
height: 35px;
width: 230px;
font-family: inherit;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font#v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
<title>تایپ کردن</title>
</head>
<body>
<div class="container">
<main class="main">
<p class="console">
<span>C:\</span>
<span id="caption"></span>
<span id="cursor"></span>
</p>
</main>
<footer class="footer">
<input type="text" id="user-caption" placeholder="your text ..." />
<button id="test-typing" onclick="typing()">write</button>
<button id="test-erasing">eraser</button>
</footer>
</div>
<script src="main.js"></script>
</body>
</html>

why arent my links white and without the line under?

im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>

Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}

Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc

Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!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="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>

You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}

How to get card to resize when screen size is changed

I have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same
. I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.
If anyone can help me with this I'd be really appreciative.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="content-wrapper">
<div class="loader"></div>
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<main>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
box-sizing: border-box;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
margin-bottom: 1.25rem;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: auto;
}
#include media {
height: 500px;
}
.inner {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
#include media {
width: 50%;
height: 100%;
}
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
#include media {
font-size: 30px;
}
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
width: 60rem;
}

The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card">. Plus I added some #media(max-width: ... px) settings.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
width: 70%;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: 0 !important;
}
/*
#include media {
height: 500px;
}*/
.inner {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
/* #include media {
width: 50%;
height: 100%;
}*/
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
/*#include media {
font-size: 30px;
}*/
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.Key{
margin-top: 50px;
}
.content-wrapper {
height: 100vh;
}
#media(max-width: 1000px) {
.Key, .subtitle {
font-size: 1rem;
}
}
#media(max-width: 750px) {
.Key, .subtitle {
font-size: 0.8rem;
}
.inner {
height: 70%;
}
}
#media(max-width: 720px) {
.Key, .subtitle {
font-size: 0.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-wrapper">
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>

You have the width of .inner set to 500px.
That means it will always stay 500px, independent of screen size.
Try using a percentage instead - your header has width: 100%, that's why it changes width on resize.
If you need more flexibility than that, calc() allows you to calculate a value with different units, such as width: calc(20% - 10px + 2rem)

How do I make this “Convert” button translate text from an input to binary?

I am trying to create a basic website which can convert text to binary using JavaScript, but I don’t really know how to make the Convert! button work. Does anyone have a simple fix that I can use? (Don’t mind the CSS missing some code, I’m not finished.)
function convert() {
const input_el = document.querySelector(".input-text");
const output_el = document.querySelector(".output-binary");
input_el.addEventListener("input", (event) => {
let input_text = event.target.value;
let output_arr = [];
for (var i = 0; i < input_text.length; i++) {
output_arr.push(input_text.charCodeAt(i).toString(2));
}
output_el.innerHTML = output_arr.join(" ");
});
}
body {
margin: 0;
padding: 0;
}
header {
padding: 30px;
background: #09A954;
color: white;
text-align: center;
font-family: arial;
font-size: 30px;
}
.navbar {
padding: 12px;
background: #363636;
color: white;
font-size: 15px;
}
.container {
display: flex;
flex-direction: column;
padding: 80px;
background: #B3B3B3;
}
.input_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #D35400;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
input {
background: #D35400;
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
}
button {
width: 100px;
}
.output_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #2980B9;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
p2 {
font-size: 30px;
font-family: calibri;
}
p4 {
font-size: 15px;
font-family: arial;
}
<!DOCTYPE html>
<html>
<head>
<title>Text to binary converter</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Text to binary converter</h1>
</header>
<div class="navbar">
<p1>link</p1>
</div>
<div class="container">
<div class="input_box">
<p2>This is what a human sees:</p2><br>
<p3>Please enter text below</p3><br>
<input type="text" name="" class="input-text">
</div><br><br>
<button onclick="convert()">Convert!</button><br><br>
<div class="output_box">
<p2>This is what a machine sees:</p2><br>
<p4 class="output-binary"></p4>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Link to JSFiddle: https://jsfiddle.net/SaltySandwich/65te8omy/

I fixed your exisiting project.
I took an easier aproach at JavaScript. You can write everything you need in 6 lines on JavaScript code :)
For your output, you should use the <output> instead of <input>.
Take a look at this:
function convert() {
var output = document.getElementById("output_text");
var input = document.getElementById("input_text").value;
output.value = "";
for (i = 0; i < input.length; i++) {
output.value += input[i].charCodeAt(0).toString(2) + " ";
}
}
body {
margin: 0;
padding: 0;
}
header {
padding: 30px;
background: #09A954;
color: white;
text-align: center;
font-family: arial;
font-size: 30px;
}
.navbar {
padding: 12px;
background: #363636;
color: white;
font-size: 15px;
}
.container {
display: flex;
flex-direction: column;
padding: 80px;
background: #B3B3B3;
}
.input_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #D35400;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
input {
background: #D35400;
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
}
input:focus {
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
outline: none;
}
button {
width: 100px;
}
.output_box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background: #2980B9;
border-radius: 10px;
text-align: center;
box-shadow: 0px 3px 5px #000000;
height: 100px;
width: ;
}
p2 {
font-size: 30px;
font-family: calibri;
}
p4 {
font-size: 15px;
font-family: arial;
}
<!DOCTYPE html>
<html>
<head>
<title>Text to binary converter</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Text to binary converter</h1>
</header>
<div class="navbar">
<p1>link</p1>
</div>
<div class="container">
<div class="input_box">
<p2>This is what a human sees:</p2><br>
<p3>Please enter text below</p3><br>
<!--INPUT FIELD-->
<input id="input_text" value="Human sees this" />
</div><br><br>
<button onclick="convert()">Convert!</button><br><br>
<div class="output_box">
<p2>This is what a machine sees:</p2><br>
<!--INPUT FIELD-->
<output id="output_text">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Ohh.. I also edited your CSS a little bit so the input doesn't have the annoying border around it... You can delete my changes by deleting this:
input:focus {
border: none;
border-bottom: 2px solid #000000;
font-size: 15px;
outline: none;
}
If you need anything cleared out be sure to comment under this post :)

Take a look at this:
function convert() {
var output=document.getElementById("ti2");
var input=document.getElementById("ti1").value;
output.value = "";
for (i=0; i < input.length; i++) {
output.value +=input[i].charCodeAt(0).toString(2) + " ";
}
}
input {font-size:12px; width:200px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<input id="ti1" value ="Human sees this"/>
<input id="ti2" value ="Machine sees this"/>
<button onclick="convert();">Convert!</button>
<script src="main.js"></script>
</body>
</html>
It should give you the basic idea...

Develop Reference

JavaScript is the programming language of the Web.

seems px-s are not the same as in design - javascript

<meta name="viewport" content="width=device-width, initial-scale=1"> I should add this in my html page

Related

how to make a li tag horizontal while its a block

How I show value of an input inside a span tag in the form of typing effect?

why arent my links white and without the line under?

How to get card to resize when screen size is changed

How do I make this “Convert” button translate text from an input to binary?

Categories

Resources