Skip to content

Instantly share code, notes, and snippets.

@Sarah-JJ

Sarah-JJ/HW.html

Created February 6, 2018 21:52
Show Gist options
  • Save Sarah-JJ/d3260b32a2a1f02815f48af9a86a807f to your computer and use it in GitHub Desktop.
Save Sarah-JJ/d3260b32a2a1f02815f48af9a86a807f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HW.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Homework</title>
</head>
<body style="background: #F8F9FB">
<nav class="navbar bg-dark justify-content-between" style="color:#F8F9FB ">
<a class="navbar-brand">Homework</a>
</nav>
<br><br>
<div class="container">
<div class="row justify-content-center">
<div class=" col-12 col-md-4">
<div class="card">
<div class="card-body">
<div class="input-group input-group-sm mb-3">
<input type="text" id="txt" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<button type="button" class="btn btn-light" onclick="addElement()">Add List Element</button><br>
<ul class="list-group" id="list">
<li class="list-group-item list-group-item-warning">My List</li>
</ul>
</div>
</div>
<!-- end of column and row -->
</div> </div>
<div class="row justify-content-center mt-4 mb-4">
<div class=" col-12 col-md-6">
<div class="card">
<div class="card-body">
<div class="card">
<img class="card-img-top" src="https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5drXzEFhUmfgNSCyFSLHq9LrjruVs5_1680x8400" >
<button type="button" class="btn btn-dark" onclick="changePicture()">Change Picture</button>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class=" col-12 col-md-10">
<div class="card">
<div class="card-body">
<!-- This container includes a number of textboxes, I added each of them to a class called "myTextBoxesArray", so I can get them by the class using JavaScript -->
<div class="container">
<div class="row justify-content-center mb-4">My Textboxes Array</div>
<div class="row justify-content-center">
<div class="col col-md-2">
<input type="text" class="myTextBoxesArray form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="col col-md-2">
<input type="text" class="myTextBoxesArray form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="col col-md-2">
<input type="text" class="myTextBoxesArray form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="col col-md-2">
<input type="text" class="myTextBoxesArray form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="col col-md-2">
<input type="text" class="myTextBoxesArray form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<div class="row justify-content-center">
<div class="col col-md-3">
<button type="button" class="btn btn-dark mt-4" onclick="addToArray()">Add Values to Array</button>
</div>
</div>
<!-- end of second container -->
</div>
</div>
</div>
</div>
</div>
<!-- end of container -->
</div>
<script type="text/javascript" src="JS.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Raw
JS.js
//1-get text from input field and add new lis
function addElement(){
var newEl = document.querySelector('#txt').value;
document.querySelector('#list').innerHTML += '<li class="list-group-item list-group-item-primary">' + newEl + '</li>';
}
//2-change font size of all lis (which is only one, at the start of this JS code)
var lis = document.querySelectorAll('#list li');
for(var i=0; i<lis.length; i++){
//console.log(lis[i]);
lis[i].style.fontSize = "4px";
}
//3-change the picture
function changePicture(){
document.querySelector('img').src = "https://dressagedifferent.files.wordpress.com/2012/11/determination.jpg";
}
//4-get all all input boxes, and assign all of their values to an array
function addToArray(){
var textBoxArray = document.querySelectorAll('.myTextBoxesArray');
var valueArray = [];
for(var i=0; i<textBoxArray.length; i++){
valueArray[i] = textBoxArray[i].value;
}
//console log the new array, just to view it
console.log(valueArray);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment