Skip to content

Commit

Permalink
Add outline for FE prework and base card expand/complete functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@ameseee
ameseee committed Oct 30, 2020
1 parent 94667e9 commit 0951d71
Show file tree
Hide file tree
Showing 3 changed files with 221 additions and 13 deletions.
8 changes: 4 additions & 4 deletions backend-online/pre-work/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Completing this pre-work will set you up for success in our virtual classroom -
<header>
<h2>Set Up</h2>
<div>
<div class="setup tag to-do-tag">To Do</div>
<div class="setup be-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
Expand All @@ -47,7 +47,7 @@ Completing this pre-work will set you up for success in our virtual classroom -
<header>
<h2>Learn: Part 1</h2>
<div>
<div class="part-one tag to-do-tag">To Do</div>
<div class="part-one be-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
Expand Down Expand Up @@ -108,7 +108,7 @@ false</pre>
<header>
<h2>Learn: Part 2</h2>
<div>
<div class="part-two tag to-do-tag">To Do</div>
<div class="part-two be-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
Expand Down Expand Up @@ -161,7 +161,7 @@ puts "Hello! My name is #{first_name} and I am #{age} years old."</pre>
<header>
<h2>Submission</h2>
<div>
<div class="submission tag to-do-tag">To Do</div>
<div class="submission be-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
Expand Down
178 changes: 178 additions & 0 deletions frontend-online/pre-work/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
---
layout: lesson
---

# Front-End Try Coding: Pre-work

<a href="../">Back to Curriculum Index</a>

## Introduction

We are excited you will be joining us for an upcoming Try Coding workshop. If you've found yourself on this page and are not yet signed up for one, you can sign up [here](https://www.eventbrite.com/o/turing-school-of-software-amp-design-9895674202)!

Completing this pre-work will set you up for success in our virtual classroom - making sure that everyone feels comfortable with the tools we will use and a bit of foundational knowledge.

<span role="img" aria-label="clock">⏰</span> <strong>Time:</strong> Most participants share that this work took them between XX-XX minutes to complete.

<span role="img" aria-label="woman at computer">👩🏽‍💻</span> <strong>Materials:</strong> It is ideal that you work through this on a laptop or desktop computer. Everything can be done inside a browser with an internet connection.

<span role="img" aria-label="rocket">🚀</span> <strong>Goal:</strong> Work through the materials so you are prepared to engage at your workshop. Then, complete the submission form at the bottom of this page in order to get the zoom link for your scheduled workshop!

<!-- SET UP -->
<div class="expander">
<header>
<h2>Set Up</h2>
<div>
<div class="setup fe-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
alt="expander arrow icon" />
</button>
</div>
</header>
<div class="hide">
<p><a href="https://repl.it/~" target="blank">CodePen</a> provides an online platform that allows us to write code and see the results almost immediately - all inside of one browser tab! There are many other similar (and awesome) tools available; we feel this is the best choice for the Try Coding workshops.</p>
<p><span role="img" aria-label="movie">🎬</span> Please watch this short video for an introduction on how to navigate repl.it:</p>

<iframe width="100%" height="550px" frameborder="0" scrolling="no" src="https://screencast-o-matic.com/embed?sc=cYeDbCxkcH&v=6&ff=1&title=0&controls=1" allowfullscreen="true"></iframe>

<p><span role="img" aria-label="check mark">✅</span> Since we'll be using repl.it during the workshop, please create a free account with them at this time. Then, create a repl as shown in the video. You don't need to type any code in it just yet.</p>
<button class="btn-dark mark-complete-btn">Mark Complete</button>
</div>
</div>

<!-- Part 1: Data Types, puts/print -->
<div class="expander">
<header>
<h2>Learn: Part 1</h2>
<div>
<div class="part-one fe-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
alt="expander arrow icon" />
</button>
</div>
</header>
<div class="hide">
<p>Ruby is a Back-End programming language. It was written with a focus on simplicity and productivity, so is a great language for beginners!</p>
<p>Programming languages need a way to classify the various types of data they work with. Ruby works with the 3 data types defined below:</p>

<section class="data-type-cards">
<div>
<h3>String</h3>
<p>A String is a series of characters (alpha, numeric, or symbol) between quotation marks.</p>
<pre>"Hello, World!"
"12345"</pre>
</div>

<div>
<h3>Integer</h3>
<p>An Integer is a number without decimals. Basic math operations can be performed on them.</p>
<pre>137
3 + 7</pre>
</div>

<div>
<h3>Boolean</h3>
<p>A Boolean refers to a value that is either true or false. You can think of it as an on/off switch.</p>
<pre>true
false</pre>
</div>
</section>

<p>Ruby provides a command that allows us to print out the data we are working with the the console. It's a tool for learning and troubleshooting, but isn't usually included in the final code of an app. Click the "Run" button in the following example to see the outcome of the three lines of Ruby:</p>

<iframe height="400px" width="100%" src="https://repl.it/@turingschool/puts-example?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
<p><em><span role="img" aria-label="finger pointing to text">👉🏽</span> This may not feel very exciting now, but it will be a useful tool as we move forward!</em></p>
<br>

<h3>You Try</h3>
<p>In your repl, "puts" several values out to the console. Run the file and observe the output.</p>
<p>Now, instead of using the <code class="try-it-code">puts</code> command, use <code class="try-it-code">print</code>. Observe the difference in the output.</p>
<p><em><span role="img" aria-label="raised hand">🖐🏼</span> If you need help or want to feel confident in your work, <a href="https://repl.it/@turingschool/you-try-1-solution" target="blank">here is a working solution</a>.</em></p>
<div class="help-container">
<button class="help-click">FAQ: Is puts or print preferred?</button>
<div class="help-toggle">
<p>Since puts and print are both for learning and troubleshooting, you should use the one <strong>you</strong> prefer! You may choose one over the other in different situations. There is no "best practice", but it's good to know that both exist.</p>
</div>
</div>

<button class="btn-dark mark-complete-btn">Mark Complete</button>
</div>
</div>

<!-- Part 2: Variables, Interpolation -->
<div class="expander">
<header>
<h2>Learn: Part 2</h2>
<div>
<div class="part-two fe-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
alt="expander arrow icon" />
</button>
</div>
</header>
<div class="hide">
<p>We can use variables to store and reference information within a Ruby program. We can think about it as a storage bin in the garage - the contents inside of the bin are what we care about storing, and the label on the outside is how we can quickly identify it.</p>
<p>The syntax for declaring variables and assigning a value to them is as follows:</p>
<pre class="expander-code">first_name = "Maya"
age = 34
is_signed_in = true</pre>
<p>After declaring a variable, we can reference the variable name as many time as we want/need to:</p>
<pre class="expander-code">first_name = "Maya"
puts first_name
puts first_name
puts first_name</pre>
<p><em>Note that the variable `first_name` uses an underscore character to separate the two words. This is called <a href="https://en.wikipedia.org/wiki/Snake_case" target="blank">snake case <span role="img" aria-label="snake">🐍</span></a> and is a Ruby convention.</em></p>
<p>Many times, information within a program will change, so we will need to re-assign the value of a variable. Run the repl file below to observe how variable re-assignment works:</p>
<iframe height="400px" width="100%" src="https://repl.it/@turingschool/reassign-variable?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
<h3>String Interpolation</h3>
<p>String Interpolation allows us to create more dynamic and customized information for our users. Instead of telling you exactly what it does and how it works, we're only providing the syntax. You may be able to predict what the code will do just by reading through it. In the next activity, you will use that syntax and be able to see the result for yourself!</p>
<pre class="expander-code">first_name = "Maya"
age = 34

puts "Hello! My name is #{first_name} and I am #{age} years old."</pre>


<h3>You Try</h3>
<p>In the same repl file you were working in earlier, declare two variables.</p>
<p>Then, <code class="try-it-code">puts</code> or <code class="try-it-code">print</code> a sentence that uses those two variables with String Interpolation!</p>
<p><em><span role="img" aria-label="raised hand">🖐🏾</span> If you need help or want to feel confident in your work, <a href="https://repl.it/@turingschool/you-try-2-solution" target="blank">here is a working solution</a>.</em></p>
<div class="help-container">
<button class="help-click">Help! It's not working.</button>
<div class="help-toggle">
<p>If the desired result is not printing to the console, or, if you are seeing an error message, here are some go-to strategies to problem solve:</p>
<p>If repl is working very slowly, try to refresh the page. It works best in the Chrome browser.</p>
<p>Make sure you are using double quotes.</p>
<p>Check the spelling and capitalization of your variables. The variable names must be exact matches!</p>
</div>
</div>

<button class="btn-dark mark-complete-btn">Mark Complete</button>
</div>
</div>

<!-- Submission Form -->
<div class="expander">
<header>
<h2>Submission</h2>
<div>
<div class="submission fe-tag tag to-do-tag">To Do</div>
<button class="expander-btn">
<img
src="../../assets/icons/arrow.svg"
alt="expander arrow icon" />
</button>
</div>
</header>
<div class="hide">
<p>You did it <span role="img" aria-label="celebration cone">🎉</span> We hope you had some fun learning about the building blocks of Ruby - this is a great foundation!</p>
<p>Please complete the form below so we have a sense of where you are with the material so far and can customize the workshop to your needs.</p>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScyKttYAR6OiHcCsarBXbFRgZUqMI4ffZal0atN8ArByH68yw/viewform?embedded=true" width="100%" height="1076" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<button class="btn-dark mark-complete-btn">Mark Complete</button>
</div>
</div>
48 changes: 39 additions & 9 deletions public/js/active-links.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,36 @@ var bePreWorkDefault = {
var bePrework = JSON.parse(localStorage.getItem("be-prework")) || bePreWorkDefault;
localStorage.setItem("be-prework", JSON.stringify(bePrework));


var fePreWorkDefault = {
"setup": false,
"part-one": false,
"part-two": false,
"submission": false
}

var fePrework = JSON.parse(localStorage.getItem("fe-prework")) || fePreWorkDefault;
localStorage.setItem("fe-prework", JSON.stringify(fePrework));


function checkCompleteSections() {
var tags = document.querySelectorAll(".tag");

tags.forEach(function(tag) {
if (bePrework[tag.classList[0]] === true) {
tag.classList.remove("to-do-tag");
tag.classList.add("complete-tag");
tag.innerText = "complete";
if (tag.classList.contains("be-tag")) {
if (bePrework[tag.classList[0]] === true) {
tag.classList.remove("to-do-tag");
tag.classList.add("complete-tag");
tag.innerText = "complete";
}
} else {
if (fePrework[tag.classList[0]] === true) {
tag.classList.remove("to-do-tag");
tag.classList.add("complete-tag");
tag.innerText = "complete";
}
}
})
});
}

checkCompleteSections();
Expand All @@ -57,25 +77,35 @@ markCompleteBtns.forEach(function(btn) {
btn.addEventListener("click", function(e) {
var tag = btn.parentElement.parentElement.children[0].children[1].children[0]
var section = tag.classList[0];
var backEnd = tag.classList.contains("be-tag");

if (tag.classList.contains('to-do-tag')) {
tag.classList.remove('to-do-tag');
tag.classList.add('complete-tag');
tag.innerText = "complete";
btn.innerText = "Completed";
bePrework[section] = true;
localStorage.setItem("be-prework", JSON.stringify(bePrework));
upDateLocalStorage(backEnd, section, true);
} else {
tag.classList.add('to-do-tag');
tag.classList.remove('complete-tag');
tag.innerText = "to do";
btn.innerText = "Mark Complete"
bePrework[section] = false;
localStorage.setItem("be-prework", JSON.stringify(bePrework));
upDateLocalStorage(backEnd, section, false);
}
});
});

function upDateLocalStorage(backEnd, section, complete) {
if (backEnd) {
bePrework[section] = complete;
localStorage.setItem("be-prework", JSON.stringify(bePrework));
} else {
fePrework[section] = complete;
localStorage.setItem("fe-prework", JSON.stringify(fePrework));

}
}

//spicy challenge show/hide
var allSpicyTitles = document.querySelectorAll(".spicy-click");

Expand Down

0 comments on commit 0951d71

Please sign in to comment.