lesson-27

Author: iamshaunjp

dojo-blog/.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js":"1","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js":"2","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js":"3","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js":"4","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js":"5","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js":"6","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js":"7","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js":"8"},{"size":432,"mtime":1607775534246,"results":"9","hashOfConfig":"10"},{"size":686,"mtime":1607950780610,"results":"11","hashOfConfig":"10"},{"size":430,"mtime":1607944554893,"results":"12","hashOfConfig":"10"},{"size":403,"mtime":1607949632667,"results":"13","hashOfConfig":"10"},{"size":428,"mtime":1607950800450,"results":"14","hashOfConfig":"10"},{"size":1097,"mtime":1607949646818,"results":"15","hashOfConfig":"10"},{"size":143,"mtime":1607944196371,"results":"16","hashOfConfig":"10"},{"size":608,"mtime":1607953273843,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"13wetv0",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["35","36"],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]
+[{"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js":"1","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js":"2","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js":"3","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js":"4","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js":"5","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js":"6","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js":"7","C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js":"8"},{"size":432,"mtime":1607775534246,"results":"9","hashOfConfig":"10"},{"size":686,"mtime":1607950780610,"results":"11","hashOfConfig":"10"},{"size":430,"mtime":1607944554893,"results":"12","hashOfConfig":"10"},{"size":403,"mtime":1607949632667,"results":"13","hashOfConfig":"10"},{"size":428,"mtime":1607950800450,"results":"14","hashOfConfig":"10"},{"size":1097,"mtime":1607949646818,"results":"15","hashOfConfig":"10"},{"size":1003,"mtime":1607953736058,"results":"16","hashOfConfig":"10"},{"size":608,"mtime":1607953273843,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"13wetv0",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\index.js",[],["35","36"],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\App.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Navbar.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Home.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogList.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\useFetch.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\Create.js",[],"C:\\Users\\Shaun\\Documents\\Tuts\\YouTube\\course-files\\Complete-React-Tutorial\\dojo-blog\\src\\BlogDetails.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]

dojo-blog/src/Create.js

@@ -1,7 +1,37 @@
+import { useState } from "react";
+
 const Create = () => {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [author, setAuthor] = useState('mario');
+
   return (
     <div className="create">
       <h2>Add a New Blog</h2>
+      <form>
+        <label>Blog title:</label>
+        <input 
+          type="text" 
+          required 
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <label>Blog body:</label>
+        <textarea
+          required
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+        ></textarea>
+        <label>Blog author:</label>
+        <select
+          value={author}
+          onChange={(e) => setAuthor(e.target.value)}
+        >
+          <option value="mario">mario</option>
+          <option value="yoshi">yoshi</option>
+        </select>
+        <button>Add Blog</button>
+      </form>
     </div>
   );
 }

dojo-blog/src/index.css

@@ -70,3 +70,34 @@
   cursor: pointer;
 }
 
+/* create new blog form */
+.create {
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+}
+.create label {
+  text-align: left;
+  display: block;
+}
+.create h2 {
+  font-size: 20px;
+  color: #f1356d;
+  margin-bottom: 30px;
+}
+.create input, .create textarea, .create select {
+  width: 100%;
+  padding: 6px 10px;
+  margin: 10px 0;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  display: block;
+}
+.create button {
+  background: #f1356d;
+  color: #fff;
+  border: 0;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+}