dzeez · June 3, 2024 22:06
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>06.3 input.val() Practice</title>
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    </head>
    <body>
    <div class="container">
        <h1 class="header" class="instagram">Instagram</h1>
        <img class="post" src="https://vignette.wikia.nocookie.net/garfield/images/9/9c/.028_Garfield_Odie_%26_Zachary_28_24_20_25.jpg/revision/latest/scale-to-width-down/411?cb=20160521112254">
        
        <div class="comments">
            <div class="row">
                <div class="avatar garfield"></div>
                <div class="comment">we look awesome!</div>
            </div>
            
            <div class="row">
                <div class="avatar garfield"></div>
                <div class="comment">@odie</div>
            </div>
        </div>
        <!--<div class="row">-->
        <!--    <div class="avatar odie"></div>-->
        <!--    <div class="comment">-->
        <!--    </div>-->
        <!--</div>-->
        
        <div class="row">
            <div class="avatar odie"></div>
             <input class="inputclass add-comment">
        </div>
        
        <button>Post</button>
    </div>
    </body>
 </html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"],"hiddenUIComponents":["console"]}
diff --git a/script.js b/script.js
 //create a click handler for the Post button.
 $("button").click(function() {
    // grab the input field contents
    var inputval = $(".inputclass").val();
    $(".comments").append('<div class="row"><div class="avatar odie"></div><div class="comment">'+inputval+'</div></div>');
    console.log($(".avatar.odie.comment").val());
    
    //clear the input field
    $(".inputclass").val("");
    // console.log(inputval);
    // alert("test");
 });







 // header toggles brands when clicked :)
 var header = $(".header");
 header.click(function () {
    header.toggleClass("instagram");
    var brand = header.text();
    header.text(brand === "Instagram" ? "Facebook" : "Instagram");
    // header.toggleClass("instagram");
 });
diff --git a/styles.css b/styles.css
 body {
    background: gray;
    font-family: Tahoma;
 }

 .container {
    width: 425px;
    margin: 0 auto;
    background: #E8E8E8;
    padding-bottom: 15px;
 }

 .header {
    background-color: #3b5998;
    color: white;
    text-align: center;
    padding-bottom: 5px;
    margin: 0;
    height: 56px;
    line-height: 56px;
 }

 .header.instagram {
    font-family: Pacifico;
 }

 .post {
    width: 30%;
    margin: 10px 5% 0 5%;
    border-radius: 5px;
 }

 .row {
    display: flex;    
    margin: 10px;
 }

 .avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid gray;
    overflow: hidden;
 }

 .garfield {
    background-image: url('https://yiningchen.github.io/scripted/images/garfield.gif');
    background-size: contain;
    background-position: center center;
 }

 .odie {
    background-image: url('https://yiningchen.github.io/scripted/images/odie.jpg');
    background-size: contain;
    background-position: center center;
 }

 .comment {
    padding: 15px;
    width: 75%;
    border-radius: 10px;
    background-color: rgb(250,250,250);
 }

 .add-comment {
    border-radius: 10px;
    border: 1px solid #DCDCDC;
    padding: 5px 15px;
    width: 75%;
    font-size: 14px;
    font-family: Tahoma;
 }

 button {
    position: relative;
    border-radius: 5px;
    width: 90%;
    margin: 0 5%;
    padding: 10px;
    font-size: 20px;
    background: #3b5998;
    color: white;
    outline: none;
 }

 button:hover {
    background: #2e4c8c;
 }

 button:active {
    background: #2e4c8c;
    top: 3px;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>06.3 input.val() Practice</title>
	<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
	</head>
	<body>
	<div class="container">
	<h1 class="header" class="instagram">Instagram</h1>
	<img class="post" src="https://vignette.wikia.nocookie.net/garfield/images/9/9c/.028_Garfield_Odie_%26_Zachary_28_24_20_25.jpg/revision/latest/scale-to-width-down/411?cb=20160521112254">

	<div class="comments">
	<div class="row">
	<div class="avatar garfield"></div>
	<div class="comment">we look awesome!</div>
	</div>

	<div class="row">
	<div class="avatar garfield"></div>
	<div class="comment">@odie</div>
	</div>
	</div>
	<!--<div class="row">-->
	<!-- <div class="avatar odie"></div>-->
	<!-- <div class="comment">-->
	<!-- </div>-->
	<!--</div>-->

	<div class="row">
	<div class="avatar odie"></div>
	<input class="inputclass add-comment">
	</div>

	<button>Post</button>
	</div>
	</body>
	</html>
	//create a click handler for the Post button.
	$("button").click(function() {
	// grab the input field contents
	var inputval = $(".inputclass").val();
	$(".comments").append('<div class="row"><div class="avatar odie"></div><div class="comment">'+inputval+'</div></div>');
	console.log($(".avatar.odie.comment").val());

	//clear the input field
	$(".inputclass").val("");
	// console.log(inputval);
	// alert("test");
	});







	// header toggles brands when clicked :)
	var header = $(".header");
	header.click(function () {
	header.toggleClass("instagram");
	var brand = header.text();
	header.text(brand === "Instagram" ? "Facebook" : "Instagram");
	// header.toggleClass("instagram");
	});
	body {
	background: gray;
	font-family: Tahoma;
	}

	.container {
	width: 425px;
	margin: 0 auto;
	background: #E8E8E8;
	padding-bottom: 15px;
	}

	.header {
	background-color: #3b5998;
	color: white;
	text-align: center;
	padding-bottom: 5px;
	margin: 0;
	height: 56px;
	line-height: 56px;
	}

	.header.instagram {
	font-family: Pacifico;
	}

	.post {
	width: 30%;
	margin: 10px 5% 0 5%;
	border-radius: 5px;
	}

	.row {
	display: flex;
	margin: 10px;
	}

	.avatar {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 50%;
	border: 1px solid gray;
	overflow: hidden;
	}

	.garfield {
	background-image: url('https://yiningchen.github.io/scripted/images/garfield.gif');
	background-size: contain;
	background-position: center center;
	}

	.odie {
	background-image: url('https://yiningchen.github.io/scripted/images/odie.jpg');
	background-size: contain;
	background-position: center center;
	}

	.comment {
	padding: 15px;
	width: 75%;
	border-radius: 10px;
	background-color: rgb(250,250,250);
	}

	.add-comment {
	border-radius: 10px;
	border: 1px solid #DCDCDC;
	padding: 5px 15px;
	width: 75%;
	font-size: 14px;
	font-family: Tahoma;
	}

	button {
	position: relative;
	border-radius: 5px;
	width: 90%;
	margin: 0 5%;
	padding: 10px;
	font-size: 20px;
	background: #3b5998;
	color: white;
	outline: none;
	}

	button:hover {
	background: #2e4c8c;
	}

	button:active {
	background: #2e4c8c;
	top: 3px;
	}