I'm new with coding and trying to learn from freecodecamp but I'm stuck with this. When I'm trying to resize the window, the navbar and the content in section was overlapping with each other. I don't know what I do wrong and I don't want to change the whole code because I'm just learning this and I'm a slow learner so it take time to really understand this.
This is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="main-doc">
<section id="Introduction" class="main-section">
<header id="Introduction"><span class="font">Introduction</span></header>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.<br><br>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<ul>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li><br>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</ul>
</section>
<section id="What_you_should_already_know" class="main-section">
<header id="What_you_should_already_know"><span class="font">What you should already know</span></header>
<p>This guide assumes you have the following basic background:</p>
<ul>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li><br>
<li>Good working knowledge of HyperText Markup Language (HTML).</li><br>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
</ul>
</section>
<section id="Javascript_and_Java" class="main-section">
<header id="Javascript_and_Java"><span class="font">JavaScript and Java</span></header>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.<br><br>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.<br><br>JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.</p>
</section>
<section id="Hello_world" class="main-section">
<header id="Hello_world"><span class="font">Hello world</span></header>
<p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
<code>function greetMe(yourName) { alert("Hello " + yourName); } <br>greetMe("World");</code>
<p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p>
</section>
<section id="Variables" class="main-section">
<header id="Variables"><span class="font">Variables</span></header>
<p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.<br><br>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).<br><br>You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode escape sequences as characters in identifiers. Some examples of legal names are Number_hits, temp99, and _name.</p>
</section>
<section id="Declaring_variables" class="main-section">
<header id="Declaring_variables"><span class="font">Declaring variables</span></header>
<p>You can declare a variable in three ways:<br><br>With the keyword var. For example,</p>
<code>var x = 42.</code>
<p>This syntax can be used to declare both local and global variables.<br><br>By simply assigning it a value. For example,</p>
<code>x = 42.</code>
<p>This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.<br><br>With the keyword let. For example,</p>
<code>let y = 13.</code>
<p>This syntax can be used to declare a block scope local variable. See Variable scope below.</p>
</section>
<section id="Variable_scope" class="main-section">
<header id="Variable_scope"><span class="font">Variable scope</span></header>
<p>When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.<br><br>JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.</p>
<code>if (true) { var x = 5; } console.log(x); // 5</code>
<p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p>
<code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is<br>not defined</code>
</section>
<section id="Global_variables" class="main-section">
<header id="Global_variables"><span class="font">Global variables</span></header>
<p>Global variables are in fact properties of the global object. In web pages the global object is window, so you can set and access global variables using the window.variable syntax.<br><br>Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared in a document, you can refer to this variable from an iframe as parent.phoneNumber.</p>
</section>
<section id="Constants" class="main-section">
<header id="Constants"><span class="font">Constants</span></header>
<p>You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p>
<code>const PI = 3.14;</code>
<p>A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.<br><br>The scope rules for constants are the same as those for let block scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.<br><br>You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p>
<code>// THIS WILL CAUSE AN ERROR function f() {}; const f = 5; // THIS<br>WILL CAUSE AN ERROR ALSO function f() { const g = 5; var g;<br>//statements }</code>
<p>However, object attributes are not protected, so the following statement is executed without problems.</p>
<code>const MY_OBJECT = {"key": "value"}; MY_OBJECT.key =<br>"otherValue";</code>
</section>
<section id="Data_types" class="main-section">
<header id="Data_types"><span class="font">Data types</span></header>
<p>The latest ECMAScript standard defines seven data types:</p>
<ul>
<li>Six data types that are primitives:<br><br>
<ul style="list-style-type:circle;">
<li>Boolean. true and false.</li><br>
<li>null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.</li><br>
<li>undefined. A top-level property whose value is undefined.</li><br>
<li>Number. 42 or 3.14159.</li><br>
<li>String. "Howdy"</li><br>
<li>Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li><br>
</ul>
</li>
<li>and Object</li>
</ul>
<p>Although these data types are a relatively small amount, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform.</p>
</section>
<section id="if...else_statement" class="main-section">
<header id="if...else_statement"><span class="font">if...else statement</span></header>
<p>Use the if statement to execute a statement if a logical condition is true. Use the optional else clause to execute a statement if the condition is false. An if statement looks as follows:</p>
<code>if (condition) { statement_1; } else { statement_2; }</code>
<p>condition can be any expression that evaluates to true or false. See Boolean for an explanation of what evaluates to true and false. If condition evaluates to true, statement_1 is executed; otherwise, statement_2 is executed. statement_1 and statement_2 can be any statement, including further nested if statements.<br><br>You may also compound the statements using else if to have multiple conditions tested in sequence, as follows:</p>
<code>if (condition_1) { statement_1; } else if (condition_2) {<br>statement_2; } else if (condition_n) { statement_n; } else {<br>statement_last; }</code>
<p>In the case of multiple conditions only the first logical condition which evaluates to true will be executed. To execute multiple statements, group them within a block statement ({ ... }) . In general, it's good practice to always use block statements, especially when nesting if statements:</p>
<code>if (condition) { statement_1_runs_if_condition_is_true;<br>statement_2_runs_if_condition_is_true; } else {<br>statement_3_runs_if_condition_is_false;<br>statement_4_runs_if_condition_is_false; }</code>
<p>It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:</p>
<code>if (x = y) { /* statements here */ }</code>
<p>If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:</p>
<code>if ((x = y)) { /* statements here */ }</code>
</section>
<section id="while_statement" class="main-section">
<header id="while_statement"><span class="font">while statement</span></header>
<p>A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:</p>
<code>while (condition) statement</code>
<p>If the condition becomes false, statement within the loop stops executing and control passes to the statement following the loop.<br><br>The condition test occurs before statement in the loop is executed. If the condition returns true, statement is executed and the condition is tested again. If the condition returns false, execution stops and control is passed to the statement following while.<br><br>To execute multiple statements, use a block statement ({ ... }) to group those statements.<br><br>Example:<br><br>
The following while loop iterates as long as n is less than three:</p>
<code>var n = 0; var x = 0; while (n < 3) { n++; x += n; }</code>
<p>With each iteration, the loop increments n and adds that value to x. Therefore, x and n take on the following values:</p>
<ul>
<li>After the first pass: n = 1 and x = 1</li><br>
<li>After the second pass: n = 2 and x = 3</li><br>
<li>After the third pass: n = 3 and x = 6</li>
</ul>
<p>After completing the third pass, the condition n < 3 is no longer true, so the loop terminates.</p>
</section>
<section id="Function_declarations" class="main-section">
<header id="Function_declarations"><span class="font">Function declarations</span></header>
<p>A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:</p>
<ul>
<li>The name of the function.</li><br>
<li>A list of arguments to the function, enclosed in parentheses and separated by commas.</li><br>
<li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
</ul>
<p>For example, the following code defines a simple function named square:</p>
<code>function square(number) { return number * number; }</code>
<p>The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.</p>
<code>return number * number;</code>
<p>Primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.</p>
</section>
<section id="Reference" class="main-section">
<header id="Reference"><span class="font">Reference</span></header>
<ul>
<li>All the documentation in this page is taken from MDN</li>
</ul>
</section>
<nav id="navbar">
<header id="jsdocument">JS Documentation</header>
<div class="navi" id="navi">
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
<a class="nav-link" href="#Javascript_and_Java">JavaScript and Java</a>
<a class="nav-link" href="#Hello_world">Hello world</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link" href="#Declaring_variables">Declaring variables</a>
<a class="nav-link" href="#Variable_scope">Variable scope</a>
<a class="nav-link" href="#Global_variables">Global variables</a>
<a class="nav-link" href="#Constants">Constants</a>
<a class="nav-link" href="#Data_types">Data types</a>
<a class="nav-link" href="#if...else_statement">if...else statement</a>
<a class="nav-link" href="#while_statement">while statement</a>
<a class="nav-link" href="#Function_declarations">Function declarations</a>
<a class="nav-link" href="#Reference">Reference</a>
</div>
</nav>
</main>
</body>
</html>
This is my CSS
body {
font-family: Arial;
margin: 0;
}
section {
float: right;
width: 77%;
height: auto;
border-left: 3px solid lightgrey;
padding-left: 20px;
}
#Introduction {
padding-top: 20px;
}
.font {
font-size: 27;
}
p {
padding-left: 25px;
}
ul {
padding-left: 85px;
}
#jsdocument {
padding-top: 13px;
padding-bottom: 20px;
font-size: 31;
text-align: center;
}
.nav-link {
margin: 0;
padding: 13px 0 13px 25px;
width: 240px;
display: block;
border-top: 1px solid black;
text-decoration: none;
color: black;
}
.navi {
overflow-y: scroll;
width: 285px;
height: 600px;
}
#navbar {
position: fixed;
}
code {
border:1px solid #f5f5f5;
background-color: #f5f5f5;
width: 950px;
padding: 10px 0 10px 25px;
margin-left: 30px;
display: inline-block;
}
#media screen and (max-width: 810px) {
#navbar {
width: 100%;
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.navi {
overflow-y: scroll;
overflow-x: hidden;
width: 790px;
height: 206px;
border-top: 1px solid black;
border-bottom: 2px solid black;
border-left: 2px solid black;
}
.nav-link {
width: 750px;
padding-left: 35px;
}
#Introduction {
padding-top: 160px;
}
section {
border: none;
float: left;
width: 100%;
overflow: auto;
padding-left: 0;
}
}
I'm trying to add more media query first but I don't think it effective. I thought the section element in CSS have a way to add some property so that the content will go to right with resize like this https://technical-documentation-page.freecodecamp.rocks/ but the navbar position is fixed and does not change first until min-width: 810px
Related
I'm pretty new to react and just want to get off on the right foot before I get deep into it and have to go back and change everything.
I'm wondering how to handle semantic html in react. Things like <header>, <nav>, <aside>, etc. I know these tags are important for accessibility reasons among other things, and I'd like to have that same kind of structure in my react app. I'm just not sure how to go about it. In reading online about it I see that <fragment> might be something I should use, but it doesn't seem to achieve the accessibility part of semantic html that I'd like to have.
How do you go about incorporating semantic html into react? And a possible second question, how does it work with components? If I have multiple components that each have a <header> or something, how does react compile that? Would I have a <header> and <footer> within each component? Or would my navbar component just be enclosed within <header> and my footer component would just be enclosed within <footer> and everything else would have its own <main>? At this point I feel like I'm overthinking it, but when I try to get started actually writing I get stuck.
It looks like you are indeed overthinking things.
React allows you to build and compose components using any type of valid HTML elements (semantic or not).
It's good practice to build accessible websites. With that in mind, you can have all sorts of semantics elements divided into components. These components can be Class components or Functional components (if you're using React Hooks they're all functional components).
Here's a quick example:
class App extends React.Component {
state = {
name: 'Amazing Startup'
}
render() {
return(
<React.Fragment>
<Header name={this.state.name}/>
<Main />
<Footer />
</React.Fragment>
)
}
}
function Header({ name }) {
return (
<header>
<h1>Hello! We are {name}</h1>
</header>
)
}
function Main() {
return (
<main>
<p>Important stuff goes here..</p>
</main>
)
}
function Footer() {
return (
<footer>
<p>Made with React - 1 Hacker Way Menlo Park, CA 94025</p>
</footer>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
body {
font-family: sans-serif;
min-height: 100vh;
margin: 0;
}
#root {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
header {
font-size: 0.8rem;
background-color: deepskyblue;
padding: 0.5rem;
}
main {
background-color: limegreen;
padding: 0.5rem;
}
footer {
background-color: orange;
padding: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
It's worth noting that you can definitely place all the required HTML elements inside a single component. However, it's nice to separate functionality, this in turn teaches you how to compose components, which is one of their main design principles.
all supported html attributes
JSX supports all html tags. All normal html semantics apply in react JSX.
Fragment
The React.Fragment component lets you return multiple elements in a
render() method without creating an additional DOM element
Correct react JSX syntax is each react component returns a single node, typically achieved like
render (
<div>
{ /* multiple children */ }
</div>
);
but this injects basically a useless div into the DOM. Fragment allows the following which won't pollute the DOM.
render (
<Fragment>
{ /* multiple children */ }
</Fragment>
);
I have added “Overflow : auto” to the navbar ul and it doesn’t work. When I change it to “Overflow: scroll” it never shows a scrollbar.
#navbar{
position: sticky;
min-width:290px;
top:0px;
left:0px;
width:auto;
height:100%;
border-right:solid;
border-color:rgba(0,22,22,0.4);
}
#navbar ul{
height:88%;
overflow-y:auto;
overflow-x:hidden;
}
CodePen
I can’t get it to work. Does anyone know what might be the problem?
Thank you in advance!
Use vh instead of %
Learn here about vh:https://css-tricks.com/viewport-sized-typography/
#navbar ul {
height: 88vh;
overflow-y: auto;
overflow-x: hidden;
}
See code:
body {
overflow-x: hidden;
}
#header {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#header-img {
height: 89.6vh;
width:100%;
}
header{
color:black;
font-size: 30px;
margin:10px;
text-align:center;
font-size:1.8em;
font-weight:thin;
}
#main-doc header{
text-align:left;
margin:0px;
}
#firstnav {
display: flex;
max-width: 100%;
}
#headernav {
position:absolute;
top:89.5vh;
width: 100vw;
max-width:99%;
padding: 1em;
background: linear-gradient(to bottom right, rgba(1,143,209,0.6), rgba(180,164,226,1));
display: flex;
justify-content: space-around;
left: 0;
border: 0.1em black solid;
#media min-width 740px {
}
}
#headernav > a {
color: white;
text-decoration: none;
}
#headernav > a:hover {
color: white;
text-decoration: underline;
font-weight: bold;
}
#maincontent {
display: flex;
position: absolute;
top: 100vh;
}
#navbar{
position: sticky;
min-width:290px;
top:0px;
left:0px;
width:auto;
height:100%;
border-right:solid;
border-color:rgba(0,22,22,0.4);
}
#navbar ul{
height:88vh;
overflow-y:auto;
overflow-x:hidden;
}
#navbar li{
color: #4d4e53;
border:1px solid;
border-bottom-width:0px;
padding:10px;
padding-left:45px;
list-style: none;
position:relative;
left:-50px;
width:100%;}
#navbar a{
color: #4d4e53;
text-decoration:none;
cursor:pointer;
}
#main-doc{
margin-left: 1em;
}
section article{
color: #4d4e53;
margin:15px;
font-size:0.96em;
}
section li {
margin:15px 0px 0px 20px;
}
code{
display:block;
text-align: left;
white-space: pre;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 2;
background-color:#f7f7f7;
padding:15px;
margin:10px;
border-radius:5px;
<div id="header">
<img id="header-img" src="https://s22.postimg.cc/k06w5d3qp/scott-webb-271924-unsplash.jpg"alt="header-image">
</div>
<div id="firstnav">
<nav id="headernav">
Go To Course
Related Topics
Contact Us
</nav>
</div>
<div id="maincontent">
<nav id="navbar">
<header>JS Documentation</header>
<ul>
<a class="nav-link" href="#Introduction" rel="internal"><li>Introduction</li></a>
<a class="nav-link" href="#What_you_should_already_know" rel="internal"><li>What you should already know</li></a>
<a class="nav-link" href="#JavaScript_and_Java" rel="internal"><li>JavaScript and Java</li></a>
<a class="nav-link" href="#Hello_world" rel="internal"><li>Hello world</li></a>
<a class="nav-link" href="#Variables" rel="internal"><li>Variables</li></a>
<a class="nav-link" href="#Declaring_variables" rel="internal"><li>Declaring variables</li></a>
<a class="nav-link" href="#Variable_scope" rel="internal"><li>Variable scope</li></a>
<a class="nav-link" href="#Global_variables" rel="internal"><li>Global variables</li></a>
<a class="nav-link" href="#Constants" rel="internal"><li>Constants</li></a>
<a class="nav-link" href="#Data_types" rel="internal"><li>Data types</li></a>
<a class="nav-link" href="#if...else_statement" rel="internal"><li>if...else statement</li></a>
<a class="nav-link" href="#while_statement" rel="internal"><li>while statement</li></a>
<a class="nav-link" href="#Function_declarations" rel="internal"><li>Function declarations</li></a>
<a class="nav-link" href="#Reference" rel="internal"><li>Reference</li></a>
<a class="nav-link" id="related_topics" href="#Related_topics" rel="internal"><li>Related Topics</li></a>
<a class="nav-link" id="contact_us" href="#Contact_us" rel="internal"><li>Contact us</li></a>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</p>
<p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
<li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li>
<li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.</li>
</artice>
</section>
<section class="main-section" id="What_you_should_already_know">
<header>What you should already know</header>
<article>
<p>This guide assumes you have the following basic background:</p>
<li>A general understanding of the Internet and the World Wide Web (WWW).</li>
<li>Good working knowledge of HyperText Markup Language (HTML).</li>
<li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
</artice>
</section>
<section class="main-section" id="JavaScript_and_Java">
<header>JavaScript and Java</header>
<article>
<p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
<p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements. Functions can be properties of objects, executing as loosely typed methods.</p>
<p>JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed.</p>
</article>
</section>
<section class="main-section" id="Hello_world">
<header>Hello world</header>
<article>
To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:
<code>function greetMe(yourName) {
alert("Hello " + yourName);
}
greetMe("World");
</code>
Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!
</article>
</section>
<section class="main-section" id="Variables">
<header>Variables</header>
<p>
You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.
</p>
<p>
A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).
</p>
<p>
You can use ISO 8859-1 or Unicode letters such as å and ü in identifiers. You can also use the Unicode escape sequences as characters in identifiers.
Some examples of legal names are Number_hits, temp99, and _name.
</p>
</section>
<section class="main-section" id="Declaring_variables">
<header>Declaring variables</header>
<article>
You can declare a variable in three ways:
<p>
With the keyword var. For example, <code>var x = 42.</code> This syntax can be used to declare both local and global variables.
</p>
<p>
By simply assigning it a value. For example, <code>x = 42.</code> This always declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.
</p>
<p>
With the keyword let. For example,<code> let y = 13.</code> This syntax can be used to declare a block scope local variable. See Variable scope below.
</p>
</article>
</section>
<section class="main-section" id="Variable_scope">
<header>Variable scope</header>
<article>
<p> When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.</p>
<p>JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.</p>
<code>if (true) {
var x = 5;
}
console.log(x); // 5</code>
<p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p>
<code>if (true) {
let y = 5;
}
console.log(y);
// ReferenceError: y is not defined</code>
</article>
</section>
<section class="main-section" id="Global_variables">
<header>Global variables</header>
<article>
<p>Global variables are in fact properties of the global object. In web pages the global object is window, so you can set and access global variables using the window.variable syntax.</p>
<p>Consequently, you can access global variables declared in one window or frame from another window or frame by specifying the window or frame name. For example, if a variable called phoneNumber is declared in a document, you can refer to this variable from an iframe as parent.phoneNumber.</p>
</article>
</section>
<section class="main-section" id="Constants">
<header>Constants</header>
<article>
<p>You can create a read-only, named constant with the const keyword. The syntax of a constant identifier is the same as for a variable identifier: it must start with a letter, underscore or dollar sign and can contain alphabetic, numeric, or underscore characters.</p>
<code>const PI = 3.14;</code>
<p>A constant cannot change value through assignment or be re-declared while the script is running. It has to be initialized to a value.</p>
<p>The scope rules for constants are the same as those for let block scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.</p>
<p>You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p>
<code>// THIS WILL CAUSE AN ERROR
function f() {};
const f = 5;
// THIS WILL CAUSE AN ERROR ALSO
function f() {
const g = 5;
var g;
//statements
}</code>
However, object attributes are not protected, so the following statement is executed without problems.
<code>const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";</code>
</article>
</section>
<section class="main-section" id="Data_types">
<header>Data types</header>
<article>
<p>The latest ECMAScript standard defines seven data types:</p>
<li><p>Six data types that are primitives:</p>
<ul>
<li>Boolean. true and false.</li>
<li>null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.</li>
<li>undefined. A top-level property whose value is undefined.</li>
<li>Number. 42 or 3.14159.</li>
<li>String. "Howdy"</li>
<li>Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li></ul>
<li>and Object</li>
Although these data types are a relatively small amount, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values, and functions as procedures that your application can perform.
</article>
</section>
<section class="main-section" id="if...else_statement">
<header>if...else statement</header>
<article>
Use the if statement to execute a statement if a logical condition is true. Use the optional else clause to execute a statement if the condition is false. An if statement looks as follows:
<code>if (condition) {
statement_1;
} else {
statement_2;
}</code>
condition can be any expression that evaluates to true or false. See Boolean for an explanation of what evaluates to true and false. If condition evaluates to true, statement_1 is executed; otherwise, statement_2 is executed. statement_1 and statement_2 can be any statement, including further nested if statements.
<p>
You may also compound the statements using else if to have multiple conditions tested in sequence, as follows:
</p>
<code>if (condition_1) {
statement_1;
} else if (condition_2) {
statement_2;
} else if (condition_n) {
statement_n;
} else {
statement_last;
} </code>
In the case of multiple conditions only the first logical condition which evaluates to true will be executed. To execute multiple statements, group them within a block statement ({ ... }) . In general, it's good practice to always use block statements, especially when nesting if statements:
<code>if (condition) {
statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true;
} else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false;
}</code>
It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:
<code>if (x = y) {
/* statements here */
}</code>
If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:
<code>if ((x = y)) {
/* statements here */
}</code>
</article>
</section>
<section class="main-section" id="while_statement">
<header>while statement</header>
<article>
A while statement executes its statements as long as a specified condition evaluates to true. A while statement looks as follows:
<code>while (condition)
statement</code>
If the condition becomes false, statement within the loop stops executing and control passes to the statement following the loop.
<p>The condition test occurs before statement in the loop is executed. If the condition returns true, statement is executed and the condition is tested again. If the condition returns false, execution stops and control is passed to the statement following while.</p>
<p>To execute multiple statements, use a block statement ({ ... }) to group those statements.</p>
Example:
<p>The following while loop iterates as long as n is less than three:</p>
<code>var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}</code>
<p>With each iteration, the loop increments n and adds that value to x. Therefore, x and n take on the following values:</p>
<li>After the first pass: n = 1 and x = 1</li>
<li>After the second pass: n = 2 and x = 3</li>
<li>After the third pass: n = 3 and x = 6</li>
<p>After completing the third pass, the condition n < 3 is no longer true, so the loop terminates.</p>
</article>
</section>
<section class="main-section" id="Function_declarations">
<header>Function declarations</header>
<article>
A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:
<li>The name of the function.</li>
<li>A list of arguments to the function, enclosed in parentheses and separated by commas.</li>
<li>The JavaScript statements that define the function, enclosed in curly brackets, { }.</li>
<p>For example, the following code defines a simple function named square:</P>
<code>function square(number) {
return number * number;
}</code>
<p>The function square takes one argument, called number. The function consists of one statement that says to return the argument of the function (that is, number) multiplied by itself. The return statement specifies the value returned by the function.
</p>
<code>return number * number;</code>
<p>Primitive parameters (such as a number) are passed to functions by value; the value is passed to the function, but if the function changes the value of the parameter, this change is not reflected globally or in the calling function.</p>
</article>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<article>
<li>All the documentation in this page is taken from MDN
</article>
</section>
<section class="main-section" id="Reference">
<header>Related Topics</header>
<li>Learn HTML
<li>Learn CSS
</section>
</main>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
I was interested whether can I pass value to the css class from the html?
Like this
Example:
<div class="mt(5)"> Some text </div>
style {
.mt(#mpx) {
margin-top: #mpx px;
}
}
I've heard that such way was possible in Less
No, the way you want it is impossible in either CSS or any of its supersets (like Less and others). It's always HTML that uses values from CSS and not in opposite. Thus you'll need some scripting for what you need.
You can however pass values from HTML to CSS via Custom Properties using inline styles:
.c {color: var(--c)}
.m {margin: var(--m)}
<div class="c" style="--c: blue" >Foo</div>
<div class="m" style="--m: 0 2em">Bar</div>
<div class="c" style="--c: green">Baz</div>
Or even like this:
* {
color: var(--c);
margin: var(--m);
/* etc. */
}
<div style="--c: blue" >Foo</div>
<div style="--m: 0 2em">Bar</div>
<div style="--c: green">Baz</div>
But that method is no way different from styling by the plain vanilla method, i.e.:
<div style="color: blue">
... etc.
It is essentially same ugly and non-maintainable.
Many people try to achieve the goal by generating hundreds of predefined classes like .mt-1, .mt-2, ... .mt-99 etc. (since it's extremely easy thing to do in a CSS-preprocessor). But it's even more ugly solution (I won't bother you with details on why it is so. You'll read about that elsewhere or learn yourself after a few projects).
Maybe this is what you looking for? CSS: Attr()
You can bind the value to an attribute and then get this attribute back in the css, like this:
CSS
<p data-foo="hello">world</p>
CSS
[data-foo]::before {
content: attr(data-foo) " ";
}
Result
hello world
Here is a way of doing that without the use of LESS.
Use CSS variables:
Variables can be declared in the style attribute of the HTML elements.
Then, the CSS will catch the values from the HTML and apply the correct styles.
Add some JavaScript:
The values of the variables can now be dynamically modified.
⋅ ⋅ ⋅
Example of use:
Background color is set in the HTML, (fixed)
Padding of div1 will grow if clicked. (dynamic)
// When clicking on the div1, padding is gonna grow up.
document.getElementById("div1").onclick = function(){
var pad = this.style.getPropertyValue("--pad");
this.style.setProperty("--pad", parseInt(pad) + 1);
}
.divs {
background: var(--bg);
padding: calc(var(--pad)*5px);
}
<div id="div1" class="divs" style="--bg: #ff6; --pad: 1;">div1</div>
<div id="div2" class="divs" style="--bg: #f66; --pad: 2;">div2</div>
⋅ ⋅ ⋅
About CSS variables:
The variable names must begin with -- and are case sensitive.
These variables values are applied to the element and its children.
To use it globally, you can declare it on the body tag.
Here is a link with some examples: https://www.w3schools.com/css/css3_variables.asp
I would like to make groups of the text content of an <option /> tag. Say I have the following: <option>8:00 (1 hour)</option>, the time pattern 8:00 can be modified, then the text in parenthesis (1 hour) can also be modified.
I was thinking of doing something like
<option>
<span>8:00</span>
<span> (1 hour)</span>
</option>
Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?
From the HTML 5spec:
Content model:
If the element has a label attribute and a value attribute: Nothing.
If the element has a label attribute but no value attribute: Text.
If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
If the element has no label attribute and is a child of a datalist element: Text.
So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.
From the HTML 4.01 spec:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)
An option element cannot have any child elements. So yes, it is bad.
You can use a Javascript plugin to overcome this limitation. For example jQuery plugin "Select2" Select2 plugin homepage. I use it in a couple of my projects and think that it's pretty flexible and convenient.
There are a number of them, but they do quite same thing - convert traditional <select> into <div> blocks with an extra functionality.
The option element
Content model: Text
No, it’s not ok. Consider keeping the values around in your script so you can recompose them when necessary.
You're better off using an HTML replacement for your <select> if you want to do this.
As established by other people, and I have tried with <b> and other tags, <option> does not take tags within it.
What you can do, since you cannot use <span> inside an <option> tag,
You can use the index number to extract the text via
document.getElementById(selectid).options[x].text where x is the relevant index, as a variable.
Then what you do is use the " (" to split the variable into the time, and remove the last character as well which removes the ")"
Sample:
<script type="text/javascript">
function extractSelectText()
{
var text = document.getElementById("main").options[1].text
/*
var tlength = text.length
var splitno = tlength - 1
var text2 = text.slice(0, splitno)
var textArray = text2.split(" )")
var time = textArray[0]
var hours = textArray[1]
}
</script>
Changing it is much simpler:
<script type="text/javascript">
function changeSelectText()
{
/* add your code here to determine the value for the time (use variable time) */
/* add your code here to determine the value for the hour (use variable hours) */
var textvalue = time + " (" + hours + ")"
document.getElementById("main").options[1].text
}
</script>
If you use a for function you can change each value of the select replacing 1 with 2, 3 and so on, and put a set interval function to constantly update it.
One option for editing would be to use some fancy pattern matching to update the content. It will be slower and more resource intensive, and depends on how regular the format is, but doesn't require any HTML modifications. My concern, however, would be on accessibility and the user experience. Having values change is hard for screen reader software to pick up, and it may also confuse other users.
It is not an answer, but may be it will help sombody, it is possible to mimic select with details tag. This example is not complete, I used javascript to close list on click
const items = document.querySelectorAll(".item");
// Add the onclick listeners.
items.forEach(item => {
item.addEventListener("click", e => {
// Close all details on page
closeList(item);
});
});
function closeList(item) {
document.querySelectorAll("details").forEach(deet => {
if (deet != this && deet.open) {
deet.open = !open;
console.log(item);
}
});
}
details {
border: 1px solid #aaa;
border-radius: 4px;
}
summary {
padding: .5em 0 .5em .5em;
font-weight: bold;
}
details[open] {
}
details[open] .item {
cursor: pointer;
padding: .5em 0 .5em .5em;
border-top: 1px solid #aaa;
}
details[open] .item:hover{
background-color: #f1f1f1;
}
details[open] .title{
padding: .5em 0 .5em .5em;
border-top: 1px solid #aaa;
}
<details>
<summary>Select your choice</summary>
<div class='title'>
This is attempt to mimic native <code>select</code> tag with html for <code>option</code> tag
</div>
<div class='item'>item 1</div>
<div class='item'>item 2</div>
<div class='item'>item 3</div>
</details>
I have a list of items I want to output as the contents of a main (the main in not included below). Each Item has 3 attributes: a Section Name, a Label and a Value. Each item is enclosed in a and everytime the Section Name changes I have to open a (and close the previous one, if any). I'm using a Razor view with this code:
#foreach (LocalStorageItem lsi in Model) {
string fld_name = "f_" + lsi.ItemName;
if (lsi.SectionName != sn) {
if (sn != "") {
Html.Raw("</fieldset>");
}
sn = lsi.SectionName;
<h2>#sn</h2>
Html.Raw("<fieldset>");
}
<div class="row">
<div class="ls_label">#lsi.ItemName</div>
<div class="ls_content" name="#fld_name" id="#fld_name">.</div>
</div>
}
#if (Model.Count != 0) {
Html.Raw("</fieldset>");
}
The problem is: each time the Section Name changes no fieldset tag (open and/or close) is generated. Where am I wrong? If I don't use Html.Raw (or #: as an alternative) the VS2010 parser signals an error.
Calling Html.Raw returns an IHtmlString; it doesn't write anything to the page.
Instead, you should write
#:</fieldset>
Using #: forces Razor to treat it as plain text, so it doesn't need to be well-formed.
However, your code can be made much cleaner by calling GroupBy and making a nested foreach loop.
I really think that the use of #: to work around such code is an abuse of that escape sequence. The problem should be addressed instead by correctly refactoring the code so that balanced tags can be easily written:
#foreach(var section in Model.GroupBy(i => i.SectionName)) {
<h2>#section.Key</h2>
<fieldset>
#foreach(LocalStorageItem lsi in section) {
string fld_name = "f_" + lsi.ItemName;
<div class="row">
<div class="ls_label">#lsi.ItemName</div>
<div class="ls_content" name="#fld_name" id="#fld_name">.</div>
</div>
}
</fieldset>
}
12 lines of code instead of 18