add first rough bits to allow read only attribution details for url/title of tool rec

Author: possumbilities

src/index.html

@@ -300,6 +300,23 @@ <h1>Choose a License for Your Work</h1>
                 <input type="text" id="work-creation-year" name="work-creation-year" value="1999" />
             </div>
 
+            <div id="tool-rec-details">
+
+                <hr />
+
+                <div>
+                    <label for="tool-title">Title of recommended tool (read only)</label>
+                    <input type="text" id="tool-title" name="tool-title" value="recommended tool title" readonly="true" />
+                </div>
+
+                <div>
+                    <label for="tool-url">URL of recommended tool (read only)</label>
+                    <input type="text" id="tool-url" name="tool-url" value="https://creativecommons.org/licenses/by/4.0/" readonly="true" />
+                </div>
+
+            </div>
+   
+
         </fieldset>
         </li>
 

src/scripts.js

@@ -407,6 +407,7 @@ function setDefaults(applyDefaults) {
 
     document.querySelector('#tool-recommendation').classList.add('disable');
     document.querySelector('#mark-your-work').classList.add('disable');
+    document.querySelector('#tool-rec-details').classList.add('hide');
 }
 
 // stepper logic here for what parts of form are 

src/style.css

@@ -82,6 +82,10 @@ ol li:has(.disable) {
     display: none;
 }
 
+.hide {
+    display: none;
+}
+
 .tool header {
     display: flex;
     flex-wrap: wrap;
@@ -120,6 +124,10 @@ ol li:has(.disable) {
     margin-left: .5em;
 }
 
+.tool-rec-details input {
+    color: lightgray;
+}
+
 
 /* debug styles */
 .help {